Problem with hover event with two elements

Problem with hover event with two elements

I have an html link that has uses hover() to trigger a div to slidedown (I animate top). 

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: 

How would you, oh jquery 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.