jQuery hover - sub-menu stay open while the cursor is not hovering, and hides it when you hover

Question

I am using jQuery for a drop-down menu. It's set that when you hover over an item a menu with a description drops down.

Pretty standard. here is a demo site: http://lucienconsulting.com/gs-news/

The problem is that when you are moving your mouse over the menus and you click a main menu item or refresh simultaneously(without your mouse coming off the menus) the menu item your cursor is over when the page finishes loading has it's sub-menu stay open while the cursor is not hovering, and hides it when you hover.

My jquery:

$(document).ready(function(){
   $(".navigation > li").hover(function(){
      $(this).children(".sub-menu").toggle();
      $(this).children(".nav-info").toggle();
   });
});

http://jsfiddle.net/nrF8Y/1/ This jsfiddle shows my code as well, but because of the way it loads the page, I have not been able to replicate the issue there.

This bug occurs in Chrome, Safari and IE 8, i have not tested above IE 8 yet. I cannot replicate the issue in firefox.

Thanks in advance.

Answer 1

toggle might be a bit vague

Seems like toggle is going the wrong direction for you in some cases, and you want to make sure you let it know when you want it to show and hide explicitly to avoid confusion.

If you use hover for on and off, it shouldn't run into these issues.

You're also toggling .sub-menu and its child .nav-info, you should only need to toggle .sub-menu; the child comes with it.

$('.navigation li').hover(function () {
    $(this).children('.sub-menu').show();//hover on
}, function () {
    $(this).children('.sub-menu').hide();//hover off
});

made a fiddle: http://jsfiddle.net/filever10/kYmfJ/

Answer 2

Try this. Sounds like since you are using toggle the code expects it to default to hidden, but it is defaulting to visible. So force it to hide at the start.

$(document).ready(function(){
   $(".navigation > li").hover(function(){
      $(this).children(".sub-menu").toggle();
      $(this).children(".nav-info").toggle();
   })
   .children(".sub-menu, .nav-info").hide();
});