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

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.