javascript - Make last hovered menu item stay open -

i have menu when hovered, shows subnav of current hovered item adding .stick submenu , removing on mouseleave. if not hovering on menu item want last hovered menu item stay open 2 seconds before hiding.

here's have. know mouseleave() called on container won't work since it's within handlerout of ul#main-nav > li hover function left show last left off.

$('ul#main-nav > li').hover(function() {     var $this = $(this);     cleartimeout(window.menustick);     $this.find('ul.submenu').addclass('stick'); }, function() {     var $this = $(this);     if($this.siblings().hover()) {         $this.find('ul.submenu').removeclass('stick');     } else if ($('#main-nav').mouseleave()) {         window.menustick = settimeout(function(){             $this.find('ul.submenu').removeclass('stick');         }, 2000);     } }); 

here's jsfiddle.

thanks in advance!

js:

 $("ul#main-nav > li").hover(     function(){       $(this).children('ul').hide().fadein(500);     },     function () {         $('ul.submenu', this).fadeout(2000);                 }); 

fiddle: http://jsfiddle.net/3f7bj/3/