Javascript 引导菜单下拉菜单故障

大家好

我已经为此挣扎了一个多月，查看了bootstrap和Stackoverflow上的各种资源，但我无法解决这个问题

我有一个跨越整个屏幕宽度的超大菜单。我面临的问题可以从以下几点看出：

当你点击菜单项“Menu0”时，下拉菜单工作正常，如果你点击“Menu1”，下拉菜单也会工作，但它不会折叠“Menu0”的下拉菜单。因此，这最终会导致一场菜单项之战，让菜单关闭

代码如下：

#主菜单{z-index:999；}
.navbar{填充：0；边距：0；背景：透明；边框：0px无；}
#主菜单.nav{float:right；margin:22px0；}
.navbar.nav.pull-right{float:right；margin right:-30px！重要；}
#主菜单.nav>li>a{
字体大小：400；
字母间距：2px；
字体大小：13px；
填充：24px 24px 22px；
文本对齐：居中！重要；
文本转换：大写；
}
#主菜单.nav>.active>a，#主菜单.nav>.active>a：悬停{
-webkit边界半径：4px4px0px 0px；
-moz边界半径：4px4px0px 0px；
边界半径：4px4px0px 0px；
}
#主菜单.nav>.active>a:focus{background:transparent；}
#选项{边距：0px 0-10px；}
.header{背景：#3838；}
.mega菜单[类*=“列-”]{
边缘顶部：5px；
边缘底部：5px；
字号：1em；
文本对齐：居中；
线高：2；
背景色：#70AB1F；
右边框：1px实心#d1d1；
高度：300px；
}
#梅努伊特姆{
背景：透明；
显示：块；
浮动：左；
颜色：#fff；
高度：50px；
列表样式图像：无；
列表样式位置：外部；
列表样式类型：无；
左边距：25px；
边缘顶部：10px；
文本对齐：左对齐；
宽度：120px；
光标：指针；
}
.菜单部分{
边缘顶部：10px；
边缘底部：-5px；
字体大小：16px；
显示：块；
文本对齐：左对齐；
浮动：左；
宽度：100%；
颜色：#fff；
}
.菜单小节{
边缘底部：-5px；
左边距：10px；
显示：块；
字体大小：14px；
文本对齐：左对齐；
浮动：左；
宽度：100%；
颜色：#ededed；
}
格林先生{
宽度：100%；
背景色：#70AB1F；
z指数：9999；
位置：绝对位置；
}

menu0

menu1

Menu2

Menu3的数据切换（“折叠”数据目标=“#”）

菜单4

您应该按照以下方式更改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">

menu0

menu1

Menu2

Menu3

Menu4

只是一个黑客-谢谢Jinu，不幸的是还没有，当你关闭小提琴上的菜单时，它会弹出一个不是全宽的菜单，并且不会完全折叠菜单。这非常有效，谢谢你，Ketan！如果可以的话，我如何将引导响应菜单添加到这个菜单中，使每个菜单项的菜单下拉到相关菜单项下，而不是菜单的底部？