I am working on a navigation menu where the last list item (li) contains a nested ul for a dropdown menu. My goal is to display this nested menu when hovering over the parent li and hide it when moving away from the menu. However, I am running into an issue where the menu glitches out when trying to mouse into it, possibly due to the absolute positioning of the sub-menu. How can I fix this problem?
$(function() {
$('li.has-sub')
.mouseover(function() {
$(this).find('ul').slideDown();
})
.mouseout(function() {
$(this).find('ul').slideUp();
});
});ul {
list-style-type:none;
padding:0 30px;
}
ul.nav {
border:1px solid black;
}
ul.nav > li {
display:inline-block;
line-height:50px;
margin-left:30px;
}
ul.nav > li:first-child {
margin-left:0;
}
ul.nav > li > ul {
display:none;
position:absolute;
border:1px solid black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li>Link One</li>
<li>Link Two</li>
<li>Link Three</li>
<li class="has-sub">
Link Four
<ul>
<li>Sub Link One</li>
<li>Sub Link Two</li>
<li>Sub Link Three</li>
</ul>
</li>
</ul>