My broken jQuery slide down menu using hover()

Question

I have an html link that has uses hover() (well, the hoverIntent plugin...but same difference) to trigger a div to slidedown (I animate the CSS top attribute).

This all works and looks perfectly, except that when the mouse moves off of the hyperlink and onto the div that contains the menu links, it immediately triggers the mouseleave event and the menu vanishes.

Obviously, I felt kind of stupid after tweaking it endlessly before noticing this "bug".

The problem is: I can't really figure out a way to achieve the effect I want.

Here is a link to my work: http://clifgriffin.com/blockade

How would you, oh experts, accomplish what I'm trying to do?

I tried to separate the mouse enter and mouse leave functions...adding the former to the link and the latter to the div, but this doesn't work quite right, and even if I solved that quirk, it wouldn't trigger mouse leave properly when you hover the link and then move up.

Basically, as long as moving the mouse from the link to the menu doesn't trigger mouseleave, I'd be fine.

I really do not want to set a boolean for each menu, and setup a bunch of events on every element surrounding the menus to trigger certain actions. This has to be simpler than that.

Any ideas?

Thanks in advance, Clif

Answer 1

try this:

var accoIn = function(){
 topSlideIn($("#top_menu_slideout .aco"));
 $("#top_menu_links .accommodations").unbind("mouseover");      
};

$("#top_menu_links .accommodations").hoverIntent(accoIn,function(){});

$("#top_menu_slideout .aco").hoverIntent(function(){},function(){
 topSlideOut($("#top_menu_slideout .aco"));     
 $("#top_menu_links .accommodations").hoverIntent(accoIn,function(){});
});