当我在手机等移动平台上查看我的网站时,“服务”的菜单选项不会下拉,但会在较大的屏幕(例如笔记本电脑和更大的屏幕)上显示
我已经在Codepen上尝试了该代码,它可以正常工作,但是在我的网站上不起作用。
/ *菜单样式* /
.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>
服务菜单应在移动显示器上展开,但不会展开。
最佳答案
您点击的那一刻
<a href="ultherapy.html">some tekst</a>
浏览器将转到该页面,而不是打开子菜单。您需要Javascript的帮助来更改此行为。在Multilevel Dropdown in Bootstrap 3.3.5上尝试解决方案
关于jquery - 菜单在移动平台上无法正常工作,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57241208/