Question

I have a dropdown menu working great with the following code:

$('#menu ul li').mouseenter(function(){
    $(this).children(".dropdown").toggle();
}).mouseleave(function(){
    $(this).children(".dropdown").toggle();
});

This works as you would expect. The issue is that if the mouse is already mouseenter on the $('#menu ul li') when the $(document).ready(function(){ }) is fired, the toggle works the other way round?

How can I avoid this?

EG: http://screenr.com/wbd

Answer 1

don’t you want to do show() on mouseenter and hide() on mouseleave?