JQuery: slidedown sub menu on hover of link and slideup only if the user doesnt navigate to the submenu?

I'm trying to create an effect where if the user hovers over a link and only the link (as apposed to the whole list item)within the main menu bar then the sub-menu slides down. The problem is that when I set the callback function to slide up onmouseout the sub-menu slides up so the user doesn't even have a chance to move their mouse over it. NOTE: I must use padding on the list items for whatever reason o using margins instead is not an option. also you'll notice that if you hover o开发者_C百科ver any part of the list item even if its not a link the sub-menu will drop down. Thanks In advance!

Below is a link to an example:

http://jsfiddle.net/a4qbn/

---

Here is a fixed version: http://jsfiddle.net/LMWLn/4/

Two things: I changed the jQuery selector for your Hover() call to only match the top-level menu LI elements. Your previous one was matching both the top-level LI elements as well as all of the LI elements in the child menu. Nothing good would come from that.

Second, I added a delay on mouseleave before hiding the menu. This gives the user time to move the mouse from the parent menu and into the child menu. If the user gets there within 100ms, then the hide is canceled.

Edit: Here's a new version that only activates when you put the mouse on the links: http://jsfiddle.net/LMWLn/9/

Notice on this version, the menu activates when the mouse enters the link. But it only deactivates when the mouse leaves the entire LI. This avoids the unseemly flash when you leisurely move the mouse down from the link to the submenu.