I'm encountering an issue with a basic JavaScript function. The goal is to toggle the dropdown menu on my website when the mouse hovers over or leaves the menu.
The problem arises because my script is triggered by the ul tags within my menu, and I have multiple ULs in my dropdown. When I move the mouse down to one of the nested ULs, it hides the dropdown due to the script.
I'm unsure how to resolve this :S
Here is my menu structure:
<div class="menu" id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a>
<ul>
<li class="menusection1">
<h1>Our Work</h1>
<ul>
<li><a href="">Project</a></li>
<li><a href="">Project2</a></li>
<li><a href="">Project3</a></li>
<li><a href="">Project4</a></li>
</ul>
</li>
<li class="menusection2">
<h1>Menu Item 2</h1>
<ul>
<li><a href="">Title</a></li>
<li><a href="">Title2</a></li>
<li><a href="">Title3</a></li>
<li><a href="">Title4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Projects</a></li>
<li><a href="#">References</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
This is the JavaScript code I am using:
$(document).ready(function(){
$('#menu ul > li')
.mouseenter(function(){
$(this).find('ul').show();
})
.mouseleave(function(){
$(this).find('ul').hide();
});
});
Any help would be greatly appreciated!