Is jQuery an easy drop down menu?

Question

I created a simple drop down menu.
Code and demo here: http://jsfiddle.net/3Lq2d/5/
It looks like this:

The fade over MENU 1 disappears in Submenu s.

It works great if you are not a spaz and do not laugh at your mouse around the menu, in which case it gets stuck in a translucent state.

Using .stop(true,true) fixes the spaz problem, but removes the mouse’s ability from the menu in the submenu. I use fadeIn / fadeOut for a little delay, so when the mouse moves from the menu to the submenu, the submenu remains visible ... stop (true, true) violates this.

What is the best way to create a fading menu with a little delay in all the right places?

---

UPDATE:

I fumbled to complete satisfaction, adding delays for hoverintent ... here is the final code: http://jsfiddle.net/3Lq2d/75/

Answer 1

Remove both return false; I think this is your problem. http://jsfiddle.net/3Lq2d/3/

Also, I suggest you use an unordered list for this instead of a div, this makes more sense, and it will give you less headaches.

Take a look at this tutorial that I wrote some time ago http://www.onextrapixel.com/2011/06/03/how-to-create-a-horizontal-dropdown-menu-with-html-css-and-jquery /