My web app features a vertical CSS menu that is working correctly except for one minor issue. When I mouse out on all elements with the class a.menutoggle, the last dropdown menu remains open. I am struggling to find a solution to hide it. Can someone please assist?
$('.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>
... (more HTML code here)
<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 have shared a fiddle where you can see the issue in action: Fiddle Link