menu strange problem

Question

i have created a menu using jQuery n hoverIntent. You can check it here
http://bit.ly/dnAEtt

To see the problem please, hover One then Two then Three then back to Two (please hover a little fast). All sub-menus will open but sub-menu under Two will not open.
This is a strange behavior, when moving forward sub-menus will open when you will move back (like One to Two to Three to Two, Two to Three to Four to Three and so on)
that sub-menu will not open.

Whats going on there?

Answer 1

A submenu that is still going up will not go down again when you hover it's link. Probably the function that registers a hover checks whether the menu is already expanded (which it still is when it's going up) and then decides that it doesn't have to come down again (even though it should).

Please post some code so we can help solve it.

Answer 2

Your problem is that the hoverIntent plugin's timeout isn't happening for another full second, so these calls are leaving things in the wrong state:

$('#nav-bar > ul > li').children('div:visible').slideUp();
$('#nav-bar > ul > li').children('a').removeClass('current');

You actually need to clear the timers and execute the mouseout handler yourself, like this:

function outHandler() {
  $(this).children('div').slideUp();
  $(this).children('a').removeClass('current', 450);
}

$('#nav-bar > ul > li').hoverIntent({
    over: function() {
        $('#nav-bar > ul > li:has(div:visible)').each(function() {
          this.hoverIntent_t = clearTimeout(this.hoverIntent_t);
          this.hoverIntent_s = 0;
          outHandler.call(this);
        });
        $(this).children('div').slideDown('slow');
        $(this).children('a').addClass('current', 250);
    },
    timeout: 1000,
    out: outHandler
});

I admit it's a bit messier, but...that's the result of the plugin not providing a clean method to do this.

You can see the updated/working version here.