每个人的好日子
我已经在这个问题上苦苦挣扎了一个多月了，看看有关bootstrap和Stackoverflow的各种资源，我无法解决这个问题。
我有一个跨越整个屏幕宽度的超级菜单。我面临的问题可以在下面的小提琴中看到：https://jsfiddle.net/btesoj8c/
当您点击菜单项＆＃34; Menu0＆＃34;下拉列表工作正常，然后如果您点击＆＃34; Menu1＆＃34;下拉列表也有效，但它不会崩溃＆＃34; Menu0＆＃34;。因此，这最终导致菜单项的争夺以使菜单关闭。
代码如下：
#main_menu { z-index:999; }
.navbar { padding: 0; margin: 0; background: transparent; border: 0px none; }
#main_menu .nav { float: right; margin: 22px 0 0 0; }
.navbar .nav.pull-right { float: right; margin-right: -30px!important; }
#main_menu .nav > li > a {
font-weight: 400;
letter-spacing: 2px;
font-size: 13px;
padding: 24px 24px 22px;
text-align: center!important;
text-transform: uppercase;
}
#main_menu .nav > .active > a, #main_menu .nav> .active > a:hover {
-webkit-border-radius: 4px 4px 0px 0px;
-moz-border-radius: 4px 4px 0px 0px;
border-radius: 4px 4px 0px 0px;
}
#main_menu .nav > .active > a:focus { background: transparent; }
#options { margin:0px 0 -10px; }
.header { background: #383838; }
.mega-menu [class*="col-"] {
margin-top: 5px;
margin-bottom: 5px;
font-size: 1em;
text-align: center;
line-height: 2;
background-color:#70AB1F;
border-right: 1px solid #d1d1d1;
height:300px;
}
#menuItem {
background: transparent;
display: block;
float: left;
color: #fff;
height: 50px;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-left: 25px;
margin-top: 10px;
text-align: left;
width: 120px;
cursor: pointer;
}
.menu-section{
margin-top: 10px;
margin-bottom: -5px;
font-size: 16px;
display: block;
text-align: left;
float: left;
width: 100%;
color: #fff;
}
.menu-subsection{
margin-bottom: -5px;
margin-left: 10px;
display: block;
font-size: 14px;
text-align: left;
float: left;
width: 100%;
color: #ededed;
}
.green{
width: 100%;
background-color:#70AB1F;
z-index: 9999;
position: absolute;
}<div class="header ">
<nav class="navbar navbar-default" role="navigation">
<ul class="nav navbar-nav navbar-collapse ">
<li id="menuItem" data-toggle="collapse" class="collapse" data-target="#menu0">Menu0<br/></li>
<li id="menuItem" data-toggle="collapse" data-target="#menu1">Menu1<br/></li>
<li id="menuItem" data-toggle="collapse" data-target="#">Menu2<br/></li>
<li id="menuItem" data-toggle="collapse" data-target="#" >Menu3<br/></li>
<li id="menuItem" data-toggle="collapse" data-target="#" >Menu4</li>
</ul>
</div>
<!-- Dropdown Menu -->
<div class="collapse green" id="menu0">
<div class="mega-menu container">
<div class="row">
<div class="col-sm-3">
<a class="menu-section" href="#">Item</a>
<a class="menu-subsection" href="#">Item</a>
<a class="menu-subsection" href="#">Item</a>
<a class="menu-section" href="#">Item</a>
<a class="menu-subsection" href="#">Item</a>
<a class="menu-subsection" href="#">Item</a>
</div>
<div class="col-sm-3">
<a class="menu-section" href="#">Item</a>
<a class="menu-subsection" href="#">Item</a>
<a class="menu-subsection" href="#">Item</a>
</div>
<div class="col-sm-3">
<a class="menu-section" href="#">Item</a>
<a class="menu-subsection" href="#">Item</a>
<a class="menu-subsection" href="#">Item</a>
</div>
<div class="col-sm-3">
<a class="menu-section" href="#">Item</a>
<a class="menu-subsection" href="#">Item</a>
<a class="menu-subsection" href="#">Item</a>
</div>
</div>
</div>
</div>
<div class="collapse green" id="menu1">
<div class="mega-menu container">
<div class="row">
<div class="col-sm-3">
<a class="menu-section" href="#">Something else</a>
<a class="menu-subsection" href="#">Something</a>
</div>
<div class="col-sm-3">
<a class="menu-section" href="#">Something else</a>
<a class="menu-subsection" href="#">Something</a>
</div>
<div class="col-sm-3">
<a class="menu-section" href="#">Something else</a>
<a class="menu-subsection" href="#">Something</a>
</div>
<div class="col-sm-3">
<a class="menu-section" href="#">Something else</a>
<a class="menu-subsection" href="#">Something</a>
</div>
</div>
</div>
</div>
非常感谢您的协助。
答案 0 :(得分：1)
您应该按照以下方式更改HTML结构：
<div id="navmenu">
<div class="panel">
<nav class="navbar navbar-default" role="navigation">
<ul class="nav navbar-nav navbar-collapse ">
<li id="menuItem" data-parent="#navmenu" data-toggle="collapse" data-target="#menu0">Menu0<br/></li>
.
.
.
<!-- Dropdown Menu -->
<div class="collapse green" id="menu0">
<div class="mega-menu container">
<div class="row">
为父div提供一个ID，并将其设置为data-parent的{{1}} li。
navmenu属性，用于确保在显示其中一个可折叠项目时，将关闭指定父级下的所有可折叠元素。
接下来，使用面板类创建一个div。
你的李有同样的身份，这是不好的。为所有li制作不同/唯一的ID。
<强> Working Fiddle
data-parent#main_menu { z-index:999; }
.navbar { padding: 0; margin: 0; background: transparent; border: 0px none; }
#main_menu .nav { float: right; margin: 22px 0 0 0; }
.navbar .nav.pull-right { float: right; margin-right: -30px!important; }
#main_menu .nav > li > a {
font-weight: 400;
letter-spacing: 2px;
font-size: 13px;
padding: 24px 24px 22px;
text-align: center!important;
text-transform: uppercase;
}
#main_menu .nav > .active > a, #main_menu .nav> .active > a:hover {
-webkit-border-radius: 4px 4px 0px 0px;
-moz-border-radius: 4px 4px 0px 0px;
border-radius: 4px 4px 0px 0px;
}
#main_menu .nav > .active > a:focus { background: transparent; }
#options { margin:0px 0 -10px; }
.header { background: #383838; }
.mega-menu [class*="col-"] {
margin-top: 5px;
margin-bottom: 5px;
font-size: 1em;
text-align: center;
line-height: 2;
background-color:#70AB1F;
border-right: 1px solid #d1d1d1;
height:300px;
}
#menuItem, #menuItem1, #menuItem2, #menuItem3, #menuItem4 {
background: transparent;
display: block;
float: left;
color: #fff;
height: 50px;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-left: 25px;
margin-top: 10px;
text-align: left;
width: 120px;
cursor: pointer;
}
.menu-section{
margin-top: 10px;
margin-bottom: -5px;
font-size: 16px;
display: block;
text-align: left;
float: left;
width: 100%;
color: #fff;
}
.menu-subsection{
margin-bottom: -5px;
margin-left: 10px;
display: block;
font-size: 14px;
text-align: left;
float: left;
width: 100%;
color: #ededed;
}
.green{
width: 100%;
background-color:#70AB1F;
z-index: 9999;
position: absolute;
}