I'm having trouble with creating a simple multi-level drop-down box and I can't seem to get the hover event to trigger only once when hovering over an li element. The hover event triggers twice when hovering over the a tag inside the list item.
Check out this jsFiddle that illustrates the issue. I've included extra padding around the a tag to demonstrate how the event is triggered twice. If you hover over just the padding, the event fires once, but as soon as you hover over the a tag, it fires again.
Here is the HTML code:
<ul class="dropit">
<li><a href="#">Thing 1</a></li>
<li><a href="#">Thing 2</a></li>
<li><a href="#">Thing 3</a>
<ul>
<li><a href="#">Sub-thing 1</a></li>
<li><a href="#">Sub-thing 2</a>
<ul class='sub-menu'>
<li><a href="#">Sub-sub-thing 1</a></li>
<li><a href="#">Sub-sub-thing 2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
And here's the jQuery code:
$(document).ready(function(e) {
$('ul.dropit li').on('mouseover', function(event) {
$target = $(event.currentTarget);
$sub = $target.children('ul').first();
$sub.slideToggle();
}).on('mouseout', function(event) {
$target = $(event.currentTarget);
$target.children('ul').first().slideToggle();
});
});
You can see the problem in action on this jsFiddle demonstration.