Issues with clearTimeout

I am trying to build a simple navigation with sub-navigation drop-downs. The desired functionality is for the drop-down to hide itself after a开发者_StackOverflow社区 certain amount of seconds if it has not been entered by the mouse. Though if it is currently hovered, I would like to clearTimeout so that it does not hide while the mouse is inside of it.

    function hideNav() {
        $('.subnav').hover(function(){
            clearTimeout(t);
        }, function() {
            $(this).hide();
        });
}

$('#nav li').mouseover(function() {
    t = setTimeout(function() { $('.active').hide()}, 4000);
    //var liTarget = $(this).attr('id');
    $('.active').hide();
    $('.subnav', this).show().addClass('active');
    navTimer;
    hideNav();
});

What am I missing? Am I passing the handle wrong?

You should also clear the timeout in mouseover, before setting the new timeout.
Otherwise a timeout started before will still be active, but no longer accessible via the t-variable.

you can make the timer variable global.

function hideNav() {
  $('.subnav').hover(function(){
    clearTimeout(window.t);
  }
}

$('#nav li').mouseover(function() {
  window.t = setTimeout(function() { $('.active').hide()}, 4000);
});

Try doing it the recommended way (JS statement as a string):

t = setTimeout("$('.active').hide()", 4000);