jquery hover problem

[jackvull]

Hi
I have a website with a jquery menu on the left.
When I hover over a menu item and quickly move to the middle of the page, the sub menu does not disappear, it just stays on top of the main page.
I can't seem to figure out what the problem is.
Do you have any ideas?

[www....] truly organicfoods.com

I tried this but it's not quite correct:

$('.menu ul li a').mouseout(function(){
  $('.menu ul li ul').hide();
  return false;
});

Also tried:

$('*').hover(function(){
  //alert($(this).get(0).tagName);
  if (
    ($(this).get(0).tagName != "A") &&
    ($(this).get(0).tagName != "UL") **
    ($(this).get(0).tagName != "LI")
    ) {
    $('.menu ul li ul').fadeOut('slow');
  }
  return false;
});

[jamie]

hi jack,
i'd use something tried and tested like superfish (http://users.tpg.com.au/j_birch/plugins/superfish/#sample3). it has a minimal footprint and is cross browser friendly.

[jackvull]

I can't, the code already exists on the website.
I need to make a function with the existing code.

[rocknbil]

First, give this a stab:

$('.menu ul li ul').css('display','none');

... but I fear that may have the same effect. from the docs: [api.jquery.com]

This event type can cause many headaches due to event bubbling. For instance, when the mouse pointer moves out of the Inner element in this example, a mouseout event will be sent to that, then trickle up to Outer. This can trigger the bound mouseout handler at inopportune times. See the discussion for .mouseleave() [api.jquery.com] for a useful alternative.

Did you give mousleave() a try?

[jackvull]

No, it's the same problem because as soon as you move from the menu to try and select something on the level 2 pop out menu, you are leaving the element so the level 2 menu disappears when it shouldn't.