0

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...

Rodney
  • 514
  • 1
  • 9
  • 27

2 Answers2

2

Right now you're attaching your behaviors directly to the anchors. When you mouse down to the newly exposed contents you've gone beyond your anchor area and mouseout is triggered. If you place both your anchor and your dropdown inside the same container and then attach your events to that container you'll get the expected behavior.

I would also recommend using mouseenter and mouseleave rather than mouseover and mouseout since you will have child elements with your menu. This question is a good description of why that's advisable.

I set up an updated fiddle here. The Category 3 menu item has been updated.

Community
  • 1
  • 1
Carth
  • 2,303
  • 1
  • 17
  • 26
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.

timidboy
  • 1,702
  • 1
  • 16
  • 27