My menu items are displayed using show and hide functions, sliding up and down on hover.
The issue I am facing is that when a list item expands, the overall background of the menu also expands. However, when it contracts, the background also contracts. If you try to move below the expanded menu, the items get hidden immediately as you move out of the menu's boundary.
This behavior can be observed by hovering over the second and third list items.
If you hover over "New Jersey Stores" and then hover over "New York Stores," you will notice an abnormal collapsing behavior where the third list item is not properly shown.
Here is a fiddle: Fiddle
HTML:
<div class="mega-col col-xs-12 col-sm-12 col-md-4" data-type="menu"><div class="mega-col-inner"><ul>
...
</ul></div></div>
JS:
$(".parent.dropdown-submenu.mega-group").hover(
function() {
$(this).children('.dropdown-mega.level2').show("500");
},
function(){
$(this).children('.dropdown-mega.level2').hide("500");
});
CSS:
li.parent.dropdown-submenu.mega-group .dropdown-mega.level2 {
display: none;
}
li {
padding:10px;
position: relative;
margin:auto;
}