我为bootstrap编写了一个多级导航菜单。它在1200px及以上时效果很好。但是当屏幕尺寸低于1200px（我将1200px设置为breapoint）时，第一级下拉菜单会在点击时打开/关闭，但第二级下拉菜单在点击时不会打开。我希望这个二级下拉菜单在单击其父锚点时在1200以下的屏幕尺寸上打开。 例如，当服务＆gt;点击低于1200px屏幕尺寸的美容牙科，我想要＆＃39;。dropdown-menu＆＃39;在它里面（牙齿卫生，假牙等）出现/ toggleshow（再次点击隐藏）。 我怎样才能做到这一点？
这是HTML：
<nav id="navbar" class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-inner">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li><a href="#">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Services <i class="fa fa-angle-down"></i></a>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Cosmetic Dentistry <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="menu-item"><a href="#">Dental Hygiene</a></li>
<li class="menu-item"><a href="#">Crowns & Bridges</a></li>
<li class="menu-item"><a href="#">Dentures</a></li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">General Dentistry <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="menu-item"><a href="#">Dental Hygiene</a></li>
<li class="menu-item"><a href="#">Crowns & Bridges</a></li>
<li class="menu-item"><a href="#">Dentures</a></li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Braces <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="menu-item"><a href="#">Dental Hygiene</a></li>
<li class="menu-item"><a href="#">Crowns & Bridges</a></li>
<li class="menu-item"><a href="#">Dentures</a></li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Implants <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="menu-item"><a href="#">Dental Hygiene</a></li>
<li class="menu-item"><a href="#">Crowns & Bridges</a></li>
<li class="menu-item"><a href="#">Dentures</a></li>
</ul>
</li>
<li class="menu-item"><a href="#">Nervous Patients Care</a></li>
</ul>
</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Team <i class="fa fa-angle-down"></i></a>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Cosmetic Dentistry <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="menu-item"><a href="#">Dental Hygiene</a></li>
<li class="menu-item"><a href="#">Crowns & Bridges</a></li>
<li class="menu-item"><a href="#">Dentures</a></li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">General Dentistry <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="menu-item"><a href="#">Dental Hygiene</a></li>
<li class="menu-item"><a href="#">Crowns & Bridges</a></li>
<li class="menu-item"><a href="#">Dentures</a></li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Braces <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="menu-item"><a href="#">Dental Hygiene</a></li>
<li class="menu-item"><a href="#">Crowns & Bridges</a></li>
<li class="menu-item"><a href="#">Dentures</a></li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Implants <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="menu-item"><a href="#">Dental Hygiene</a></li>
<li class="menu-item"><a href="#">Crowns & Bridges</a></li>
<li class="menu-item"><a href="#">Dentures</a></li>
</ul>
</li>
<li class="menu-item"><a href="#">Nervous Patients Care</a></li>
</ul>
</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Offers/Fees <i class="fa fa-angle-down"></i></a>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Cosmetic Dentistry <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="menu-item"><a href="#">Dental Hygiene</a></li>
<li class="menu-item"><a href="#">Crowns & Bridges</a></li>
<li class="menu-item"><a href="#">Dentures</a></li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">General Dentistry <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="menu-item"><a href="#">Dental Hygiene</a></li>
<li class="menu-item"><a href="#">Crowns & Bridges</a></li>
<li class="menu-item"><a href="#">Dentures</a></li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Braces <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="menu-item"><a href="#">Dental Hygiene</a></li>
<li class="menu-item"><a href="#">Crowns & Bridges</a></li>
<li class="menu-item"><a href="#">Dentures</a></li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Implants <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="menu-item"><a href="#">Dental Hygiene</a></li>
<li class="menu-item"><a href="#">Crowns & Bridges</a></li>
<li class="menu-item"><a href="#">Dentures</a></li>
</ul>
</li>
<li class="menu-item"><a href="#">Nervous Patients Care</a></li>
</ul>
</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Patients <i class="fa fa-angle-down"></i></a>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Cosmetic Dentistry <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="menu-item"><a href="#">Dental Hygiene</a></li>
<li class="menu-item"><a href="#">Crowns & Bridges</a></li>
<li class="menu-item"><a href="#">Dentures</a></li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">General Dentistry <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="menu-item"><a href="#">Dental Hygiene</a></li>
<li class="menu-item"><a href="#">Crowns & Bridges</a></li>
<li class="menu-item"><a href="#">Dentures</a></li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Braces <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="menu-item"><a href="#">Dental Hygiene</a></li>
<li class="menu-item"><a href="#">Crowns & Bridges</a></li>
<li class="menu-item"><a href="#">Dentures</a></li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Implants <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="menu-item"><a href="#">Dental Hygiene</a></li>
<li class="menu-item"><a href="#">Crowns & Bridges</a></li>
<li class="menu-item"><a href="#">Dentures</a></li>
</ul>
</li>
<li class="menu-item"><a href="#">Nervous Patients Care</a></li>
</ul>
</li>
<li><a href="#">Blog</a></li>
<li><a href="#">Referrals</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div><!-- end navbar-inner -->
</div><!-- end container -->
</nav><!-- end navbar -->
CSS：
#navbar {
clear: both;
border-radius: 0;
border: 0;
margin: 0;
background: #f9f9f9;
height: auto;
}
#navbar li a {
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
color: #575757;
padding-top: 20px;
padding-bottom: 20px;
}
#navbar li a:hover {
color: #7bcfdc
}
.dropdown-menu {
box-shadow: none;
border-radius: 0;
border: 0;
width: 240px;
padding: 0;
}
.dropdown-submenu {
position:relative;
border-radius: 0;
padding: 0;
}
.dropdown-submenu>.dropdown-menu {
top:0;
left:100%;
margin-top:-1px;
margin-left:-1px;
}
.dropdown-submenu.pull-left {
float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left:-100%;
margin-left:10px;
}
#navbar .navbar-nav li a i {
margin-left: 5px;
}
#navbar .navbar-nav li li a{
background: #eee;
text-transform: none;
padding-top: 11px;
padding-bottom: 11px;
}
#navbar .navbar-nav li li {
position: relative;
}
#navbar .navbar-nav li li i {
position: absolute;
right: 20px;
top: 14px;
}
#navbar .navbar-nav li .dropdown-submenu .dropdown-menu a {
background: #e5e5e5;
}
#navbar .navbar-nav li li a:hover,
#navbar .navbar-nav li .dropdown-submenu .dropdown-menu a:hover
{
background: #ff4e4f;
color: #FFF;
}
/*----- RESPONSIVE STYLES ------*/
@media screen and (max-width: 1199px) {
#navbar .dropdown-menu {
width: 100%;
position: relative;
}
}
@media screen and (max-width: 768px) {
.header-top p {
text-align: center;
}
.header-top a {
margin: 10px auto 0 auto;
clear: both;
display: block;
}
}
@media screen and (min-width: 1200px) {
#navbar .dropdown:hover > .dropdown-menu {
display: block;
}
.dropdown-submenu:hover>.dropdown-menu {
display:block;
}
}
我为此做了一个JSFiddle：
https://jsfiddle.net/Lefosx46/
答案 0 :(得分：0)
我看了你的代码。有很多事情要发生，所以虽然我的答案应该有效，但可能会有更有效的方法。它至少可以指出你正确的方向。
似乎存在以下问题：
@media screen and (max-width: 1199px) {
#navbar .dropdown-menu {
width: 100%;
position: relative;
}
}
我删除了它并添加了：
@media screen and (max-width: 1199px) {
.dropdown-submenu:hover .dropdown-menu {
display: block;
}
}
你可以在这里看到一个小提琴：https://jsfiddle.net/t4rnz8dg/
如果我误解了你的问题，请道歉！