Jquery mega-menu showing multiple menus due to delay

Question

Hi I have created a jquery megamenu for an ecommerce platform. I have set it up so that when you hover over a li in the top level, all of its siblings ul vanish and the relevant one appears. The problem is if you hover over 'gloves' then 'helmets' very quickly the 'gloves' appears as if there is a delay. Yet, if you go from 'helmets' to 'gloves' very quickly it works fine. any ideas? thanks

here is the jquery code and link to site http://www.firecrestmoto.co.uk/index.php

      // Add controller class to <li> on top level
      $('#menu.accordion ul li ul    li').parent().parent().parent().addClass('parentitem');


      // Hide and show entire category and sub categories at the same time
      $('#menu.accordion a').addClass('menu_closed');
       $('#menu.accordion a').hover(

    function(){
    $(this).addClass('menu_open');
    $(this).siblings('ul').fadeIn();
    $('#menu.accordion ul li ul').show();
    }
    );

      $('ul.parentitem').mouseleave(function(){
$(this).hide();
       });


      // Hover on <li> in the top level menu
    $('#menu.accordion li').hover(function(){
$(this).siblings('li').children('ul.parentitem').hide();
$(this).children('ul.parentitem').css('z-index','10000');
});


        // Leave the main menu div, all submenus disappear
         $('#menu').mouseleave(function(){
$(this).children('li').children('ul').hide();
        });


     // Add controller classes to <li> on each sub level
       $('#menu.accordion').children('li').addClass('topline');
        $('#menu.accordion ul.parentitem').children('li').addClass('finallines');

Answer 1

I think you have too many hover events firing - so if you move your mouse quickly there is a lot going on.

When you hover over a top level menu item, you are hovering over both <a> and <li>, so

$('#menu.accordion a').hover(

and

$('#menu.accordion li').hover(

will both execute.

Also, jQuery .hover() takes either:

hover( handlerIn(eventObject) , handlerOut(eventObject)  ) 

or

hover( handlerInOut(eventObject)  )

So in your case you are using handlerInOut because you are using only one function inside hover() - so the function fires when the mouse enters AND when the mouse leaves. That means that when you move in and out a top level navigation item there are four events firing.

Also, note that $('#menu.accordion li') will match not only the top level items, but also every li in the sub-menu, and you are attaching a hover event to each of them. This is way too many events.

So instead of both hovers, try something like this:

$('#menu.accordion').children('li').hover(function(){
        // Add here your code for mouse enter
        $(this).siblings('li').children('ul.parentitem').hide();
        $(this).children('ul.parentitem').css('z-index','10000');
        $(this).find('a').addClass('menu_open');
        $(this).find('ul').fadeIn();
        // I'm not sure what the following is supposed to do...
        // ...you are showing ul in all sub-menus.
        $('#menu.accordion ul li ul').show();
    }, function(){
        // Add here your code for mouse leave
        $(this).find('a').removeClass('menu_open');
        $(this).children('ul.parentitem').css('z-index','0').hide();
    },
);

You might need to adjust and clean up the above code - this is just a general idea.