Question

After searching the net for several hours, I decided to write my own code for a horizontal dropdown menu that allows html content in the dropdowns instead of the standard ‘list’ items everyone uses. I have very little code compared to most of the dropdowns I found. I have two issues that are driving me crazy.

Issue #1:
When you mouse over the Category, the ‘dropdown’ div appears as it should, but when you go to mouseover the ‘dropdown’ div it disappears. But if you mouseover another category the ‘dropdown’ div disappears and the new one appears as they both should. What am I missing?

Issue #2:
If you stop the cursor right over where the underline link of the Category appears and leave it there, the ‘dropdown’ div appears to blink by popping up twice. Can’t figure that out either?

I have posted my code here: http://jsfiddle.net/UXxL8/

Thanks so much and I know it’s probably something simple I’m overlooking. But you know how it is after you stare at the same code for too long…

Answer 1

You also need to bind the mouseover/mouseout to the dropdowns. And the reason why the dropdown is blinking is because animation functions get queued – fadeIn starts after the fadeOut has finished, so you need to stop the current animation before adding another.

Here’s the improved code.