Vertical CSS / jQuery Dropdown menu issue?

Question

In my web app I have a vertical CSS menu, to show it. My code works as expected, with one issue, when I mouse out on all a.menutoggle elements the last dropdown remains open.

I am not getting a clue on how to hide that? Please help!

 $('.menutoggle').mouseover(function(event) { $('.menucontainer').hide(); $(this).next('.menucontainer').toggle(); }); $('#menutoggle').mouseout(function() { $('.menucontainer').hide(); });

 #menuwrap { padding: 50px; } .menutoggle { display: block; z-index: 99; border: 1px solid red; } .menucontainer { display: none; position: absolute; left: 150px; top: 50px; z-index: 999; border: 1px solid blue; background: #999; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <div id="menuwrap"> <a href="#" class="menutoggle">Menu Toggle</a> <ul class="menucontainer"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul> <a href="#" class="menutoggle">Menu Toggle</a> <ul class="menucontainer"> <li><a href="#">Four</a></li> <li><a href="#">Five</a></li> <li><a href="#">Siz</a></li> </ul> <a href="#" class="menutoggle">Menu Toggle</a> <ul class="menucontainer"> <li><a href="#">Seven</a></li> <li><a href="#">Eight</a></li> <li><a href="#">Nine</a></li> </ul> </div>

I've created a fiddle here: https://jsfiddle.net/rz3g78h1/1/

Answer 1

The primary issue is because your #menutoggle selector on the mouseout event needs to use a class selector, not an id. Change it to .menutoggle .

However this raises another issue where the menu rapidly flickers as the mouse moves between the elements due to the use of mouseout . To fix this you can amend the logic to use CSS alone to show/hide the submenus, like this:

 #menuwrap { padding: 50px; } .menutoggle { display: block; z-index: 99; border: 1px solid red; } .menucontainer { display: none; } .menutoggle:hover + .menucontainer, .menutoggle + .menucontainer:hover { display: block; position: absolute; left: 150px; top: 50px; z-index: 999; border: 1px solid blue; background: #999; }

 <div id="menuwrap"> <a href="#" class="menutoggle">Menu Toggle</a> <ul class="menucontainer"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul> <a href="#" class="menutoggle">Menu Toggle</a> <ul class="menucontainer"> <li><a href="#">Four</a></li> <li><a href="#">Five</a></li> <li><a href="#">Siz</a></li> </ul> <a href="#" class="menutoggle">Menu Toggle</a> <ul class="menucontainer"> <li><a href="#">Seven</a></li> <li><a href="#">Eight</a></li> <li><a href="#">Nine</a></li> </ul> </div>