I am trying to create a drop-down menu that will stay open on hover even when it is hovering over the drop-down div ('#units-menu-links'). I can't get it to stay open while the user is still hovering over the 'units-menu-links' div. Currently it does nothing, but before I had the .toggle inside the second function which would just make it disappear whenever the user wasn't hovering over the "#units-nav" div.
Here is what my HTML looks like:
<div id="units-menu-links">
<center>
<p class="units-menu-links-items" href="dynamically generated URL">Menu Item</p>
</center>
</div>
<div id="menu">
<div id="menu-inside">
<div class="bar">
<div class="nav-block" id="units-nav">
<a href="/link/">Menu Button</a>
</div>
</div>
</div>
</div>
Here is my Jquery:
$('#units-menu-links').hide();
$("#units-nav").hover(
function () {
// Over the hover.
$('#units-menu-links').toggle();
},
function () {
// PLEASE READ THE FOLLOWING COMMENTS TO UNDERSTAND THE FUNCTIONALITY I AM TRYING TO GET.
// When the users leaves #units-nav and #units-menu-links
// then do the "$('#units-menu-links').toggle();" again to hide this.
// However if the user is hovering over "$('#units-menu-links').toggle();" then don't do anything.
}
);
(I've looked at quite a few questions and answers on SO as well as looking on Google, and can't find anything to help me with this problem. It seems like it is be a very common problem, but people have created their HTML structure differently to mine which is making it difficult to find resources.)