javascript - Synchronizing top-nav mouseleave for a tab and its associated submenu -

i'm trying create top-nav menu follows:

the idea when click tab, tab gets highlighted in black , associated menu shows beneath it. works fine.

i want menu disappear , tab unhighlighted if mouse leaves either tab or menu. i'm running trouble. @ moment, jquery use handle follows:

    $('.item-support a').click(function(e){         // removeclass('curr') other tabs             $('.item-support').addclass('curr');             $('#submenu-support').fadein('fast');              $('.item-support').mouseleave(function(e) {                 $('.item-support').removeclass('curr');                 $('#submenu-products').fadeout('fast');              });         }else{ // click again             $('.item-support').removeclass('curr');             $('#submenu-support').fadeout('fast');         }         return false;     });      $('#submenu-products').mouseleave(function(e) {             $('.item-support').removeclass('curr');             $('#submenu-products').fadeout('fast');     });      // similar code other tabs 

the problem mouseleave events tab , sub-menu not synchronized. so, example, if mouse leaves support tab , enters submenu below it, submenu vanishes. i've tried many different approaches around , have 1 crudely works using pagex , pagey co-ordinates, i'm looking more elegant solution. how tab , associated submenu work in tandem? there way bind 2 divs together? or make mouseleave recognize exception when entering div?

you can check if either element hovered, , this:

$('.item-support, #submenu-support').mouseleave(function() {     settimeout(function() {         if (!$('.item-support').is(':hover') && !$('#submenu-support').is(':hover')) {             $('.item-support').removeclass('curr');             $('#submenu-support').hide();         }     }, 50); }); 

you shouldn't bind mouseleave event in callback of event. every time click item-support, binding mouseleave event it.