菜单在移动平台上不能正常工作
菜单在移动平台上不能正常工作
提问于 2019-07-28 21:07:51
当我在移动平台(例如移动电话)上查看我的网站时，服务的菜单选项不会下拉，但会在更大的屏幕上显示，例如笔记本电脑和更大的屏幕
我已经在Codepen上尝试了代码，它工作得很好，但它不能在我的网站上工作。
/\* Menu Styles \*/ .third-level-menu {
position: absolute;
top: 0;
right: -150px;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.third-level-menu>li {
height: 30px;
background: #CCCCCC;
}
.third-level-menu>li:hover {
background: #CCCCCC;
}
.second-level-menu {
position: absolute;
top: 60px;
left: 0;
width: 167px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.second-level-menu>li {
position: relative;
height: 40px;
background: #CCCCCC;
}
.second-level-menu>li:hover {
background: #CCCCCC;
}
.top-level-menu {
list-style: none;
padding: 0 0 0 0px;
margin: 0;
}
.top-level-menu>li {
position: relative;
float: right;
height: 40px;
width: 120px;
padding-top: 0px;
background: gainsboro;
}
.top-level-menu>li:hover {
background: #CCCCCC;
}
.top-level-menu li:hover>ul {
/* On hover, display the next level's menu */
display: inline;
}
/* Menu Link Styles */
.top-level-menu a
/* Apply to all links inside the multi-level menu */
{
font: normal 14px Arial, Helvetica, sans-serif;
color: #000000;
text-decoration: none;
padding: 0 0 0 20px;
/* Make the link cover the entire list item-container */
display: inline-block;
line-height: 20px;
border: none;
}
.top-level-menu a:hover {
color: #000000;
}
</style> <div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="#page-top"></a>
</div>
<img class="img-responsive-logo" src="img/Urban Living Therapy - Logo V2-3 TRANSPARENT.png" alt="" height="300" width="250">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="top-level-menu">
<li><a href="about.html">About</a></li>
<li>
<a href="#">Services</a>
<ul class="second-level-menu">
<li>
<a href="ultherapy.html">Urban Living Therapy</a>
<ul class="third-level-menu">
<li><a href="#">Balance and Bounce</a></li>
<li><a href="#">No Shame</a></li>
</ul>
</li>
<li>
<a href="ulwellbeing.html">Urban Living Wellbeing</a>
<ul class="third-level-menu">
<li><a href="#">No name yet</a></li>
<li><a href="#">No name yet</a></li>
</ul>
</li>
<li><a href="professionals.html">For Professionals</a></li>
</ul>
</li>
<li><a href="index.html">Home</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav> <div class="wrap-contact100">
<!-- <div id="cf3" class="shadow" class="cushycms">
<img class="top2" src="img/gallery/frank-busch-700111-unsplash.jpg" height="320px" />
<img class="top1" src="img/gallery/sharon-mccutcheon-523207-unsplash.jpg" height="320px" />
<img class="top3" src="img/gallery/milan-popovic-674483-unsplash.jpg" height="320px" />
</div> -->
<!-- <div class="contact100-form-title" class="cushycms" style="background-image: url(img/gallery/frank-busch-700111-unsplash.jpg);"> -->
<div class="contact100-form-title" class="cushycms" style="background-image: url(img/gallery/frank-busch-700111-unsplash.jpg);">
<span class="contact100-form-title-1">
Contact Us
</span>
<span class="contact100-form-title-2">
Feel free to drop us a line below!
</span>
</div>
<form class="contact100-form validate-form">
<div class="wrap-input100 validate-input" data-validate="Name is required">
<span class="label-input100">Full Name:</span>
<input class="input100" type="text" name="name" placeholder="Enter full name">
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
<span class="label-input100">Email:</span>
<input class="input100" type="text" name="email" placeholder="Enter email addess">
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input" data-validate="Phone is required">
<span class="label-input100">Phone:</span>
<input class="input100" type="text" name="phone" placeholder="Enter phone number">
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input" data-validate="Message is required">
<span class="label-input100">Message:</span>
<textarea class="input100" name="message" placeholder="Your Comment..."></textarea>
<span class="focus-input100"></span>
</div>
<div class="container-contact100-form-btn">
<button class="contact100-form-btn">
<span>
Submit
<i class="fa fa-long-arrow-right m-l-7" aria-hidden="true"></i>
</span>
</button>
</div>
</form>
</div>
</div>服务菜单应该在移动显示器上展开，但它没有展开。
回答 2
Stack Overflow用户
发布于 2019-07-28 21:57:00
当你点击的那一刻
<a href="ultherapy.html">some tekst</a>浏览器转到该页面，而不是打开子菜单。你需要一些Javascript的帮助来改变这种行为。在Multilevel Dropdown in Bootstrap 3.3.5上试用解决方案
Stack Overflow用户
发布于 2019-07-28 22:53:29
这听起来像是你的网页规模的问题。更大的屏幕，比如笔记本电脑，显然比iPhone这样的小屏幕要大。网页不会改变它的比例，除非有人告诉它，从你的代码看，我有理由相信这可能是问题所在。在META部分中尝试这行代码，看看它是否有帮助。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
***<meta name="viewport" content="width=device-width, initial-scale=1.0">***
<title>TEST</title>粗体代码行告诉计算机/电话根据访问内容的设备更改比例。因此，它将改变看起来或多或少看起来像你的笔记本电脑在你的手机上。希望这能有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57241208
复制相关文章
相似问题
腾讯云开发者
