Question

I have a vertical css menu that I want to convert to a dropdown. I have added some javascript for mouseover to get it to drop down but cannot get it to go away on mouseout.

http://jsfiddle.net/hCVjK/4/

Answer 1

It’s a tricky problem to solve, especially when you are fading out instead of immediately hiding. You need to keep track of what the mouse is hovering over, and account for the fact that the mouseenter and mouseleave events don’t fire perfectly at the same time as you move from one tag to another.

Try this out:
http://jsfiddle.net/cgagliardi/NPVVQ/

In the HTML, I removed the onMouseOver code you had on categories and moved it into the JS.

In the CSS, I changed

#navigation { ... visibility: hidden }

to

#navigation { ... display: none }

Aside from that, all of the changes are in the javascript. If you want to delay the time it takes for the main menu to fade out, change the 100 value in the setTimeout call.