JQuery on hover out get the element the mouse has moved into

Question

I have a navigation system that has a single level drop down on some of the elements. I have got it working just the way I want, except that it's too easy to just fall out the bottom of the nav when mousing along it (it's a second full width line drop down with inline items).

What I need is a way to stop the nav from dissapearing when you fall out the bottom, without interfering with the other navigation items (so that these still instantly hide the nav when you hover over them).

Is there a way to find the element that you're mousing into when the hover out event is called? This way I could detect if they were mousing over the body and start a timer to hide the nav in a 1000ms or something.

I have tried hoverIntent but this doesn't work for what I need, as I can't afford a delay on moving from one nav item to the other... it makes the nav very difficult to use!

Either that or is there a way to detect if they have simply fallen out the bottom of the nav using mouse position?

Any help would be very appreciated. The Jquery for the current nav is below.

var navDisplayTimer;
var navDisplayObject;
$("#main-nav > li").addClass("js-enabled");
$("#main-nav > li").hover(function(){
 $(this).addClass("hovered");
 if ($(this).find("ul").length != 0) {
  $(this).parent().stop().animate({borderWidth: "22px"}, 400);
  if($(this).parent().css("borderWidth") == "22px 22px 22px 22px") {
   $(this).find("ul").show();
  } else {
   navDisplayObject = this;
   navDisplayTimer = setTimeout(function() {
    $(navDisplayObject).find("ul").show();
   }, 300);
  }
 }
},function(){
 clearTimeout(navDisplayTimer);
 $(this).find("ul").hide();
 $(this).parent().stop().animate({borderWidth: "2px"}, 400);
 $(this).removeClass("hovered");
});

Answer 1

A slight inverse to your current approach that may work is to have an event fire when the user moves off the menu div, but use a timeout to do this.

In addition to this, have an event that fires when you mouse over navigation items in the menu div to clear the close timeout.

This would bacially give the user and opportunity to mouse back in. Try it, see what you think.

$('#selectednavigationdiv').bind("mouseout", close);
$('#selectednavigationitems').bind("mouseover", function() { clearTimeout(hideTimer ); });// stop drop down menu from being closed

var hideTimer = setTimeout(function() {  }, 1);//initialise so not undefined
function close() {
    clearTimeout(hideTimer );
    hideTimer = setTimeout(function() { $('#selectednavigationdiv').slideUp('fast') }, 1000);//close drop down menu                    
}