Bootstrap Dropdown Glitch Menu

Question

Good afternoon. Everything

I have been struggling with this for many months, looking at various resources in bootstrap and Stackoverflow, and I cannot solve this problem.

I have a mega menu that covers the entire width of the screen. The problem I am facing can be seen in the script below: https://jsfiddle.net/btesoj8c/

When you click on the menu item "Menu0", the drop-down menu works fine, and then if you press "Menu1", the drop-down menu will also work, but it will not hide the drop-down menu "Menu0". Thus, this ultimately causes a battle of menu items to close the menu.

The code is as follows:

#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> 

Your help will be greatly appreciated.

Answer 1

You should change your HTML structure as follows:

 <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"> 

Give the parent div a single id and set its data-parent to li like navmenu here.

data-parent to ensure that all discarded items under the specified parent will be closed when one of the discarded items is displayed.

Then make one div with the panel class.

And you have the same identifier, which is not very good. Create a different / unique identifier for all li.

Working script

 #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; } 

 <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div id="navmenu"> <div class="panel header"> <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> <li id="menuItem1" data-parent="#navmenu" data-toggle="collapse" data-target="#menu1">Menu1<br/></li> <li id="menuItem2" data-parent="#navmenu" data-toggle="collapse" data-target="#">Menu2<br/></li> <li id="menuItem3" data-parent="#navmenu" data-toggle="collapse" data-target="#" >Menu3<br/></li> <li id="menuItem4" data-parent="#navmenu" data-toggle="collapse" data-target="#" >Menu4</li> </ul> </nav> <!-- 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> </div> </div>