jQuery toggle glitch

Question

is there a way to avoid problems with jQuery's slideToggle()?

I have a horizontal-sliding menu when somebody hovers a link there'es slideToggling list beneath.

The point is when I hover my mouse over the link before jQuery loads - everthing works just opposite way. The menu disappears when I hover and shows when the pointer is somewhere else. So menu is useless.

Here's jQuery code:

$('#nav li').hover(function(){
$(this).children('ul').slideToggle();

})

Maybe some coditionals, something like "if nav li hovered and ul is invisible then slidetoggle once again"? But I'm not sure how to write it.

Thanks a lot.

Answer 1

To be sure here (independent of initial mouse position), you have to split your .hover() to explicitly call .slideDown() on mouseenter and .slideUp() on mouseleave, like this:

$('#nav li').hover(function(){
  $(this).children('ul').slideDown();
}, function() {
  $(this).children('ul').slideUp();
});