javascript - Unique Mix of hoverIntent and timeout -

i have situation if hovering on #main-nav li item show subnav. need delay allow user reach (subnav). i've tried solutions this if hover on item, doesn't hide previous hovered item until delay over. tried adding if statements within handlerout determine if hovering on another nav item or mouseout #main-nav section allowing timer run (but doesn't run since within handlerout).

here's code below , here on jsfiddle.

var $mainlist = $('#main-nav li'); var $subnav = $('#main-nav li ul');  $(function () {      $mainlist.hoverintent(      function () {         $(this).addclass('active');     },      function () {         if ($('#main-nav li').hover() && $('#main-nav li').not($(this))) {             $(this).removeclass('active');         } else if ($('#main-nav').add($subnav).mouseleave()) {             timer = settimeout(function () {                 $('#main-nav').find('li.active').removeclass('active');             }, 1000);         }     });      $subnav.hover(      function () {         cleartimeout(timer);     },      function () {         //     }); }); 

please disregard how sub-nav positioned relates site styling.

any appreciated.

there few issues code:

first, selectors:

if want immediate children, use >:

var $mainlist = $('#main-nav > li'); 

you forgot # in second selector.

from there, pretty straight-forward, assuming got scenario correctly:

• when entering main list item, remove active class selected item, if any.
• when leaving such element, create timeout allows enter sub-menu.
• when entering sub-menu, clear timeout leave sub-menu visible.
• when leaving sub-menu, deactivate it.

a working version can found here.

note colorized sub-menu make clear when you're entering or leaving it.