CODEWITHSUNDEEP
javascriptjqueryhtmlcss
CyanPrime
CyanPrime

Reputation: 5193

Why doesn't my drop-down menu stay visible when I hover over it?

Okay, so I've got two drop-down menus on my page, Navigation, and Links. Links works normally, but Navigation disappears when I try to hover over it. I got no idea why, so I'm asking. Why does my Navigation menu disappear when I hover over it, and how do I fix it?

My site with the error

Upvotes: 1

Views: 798

Answers (2)

pimvdb
pimvdb

Reputation: 154828

You have an element that's hanging over the left menu named #crwrap. So when moving your mouse to the Navigation options, the mouseout is triggered because you're suddenly hovering the #crwrap element instead of the Navigation menu. It's invisible but if you use a debugging tool that supports DOM searching you'll see it covering the area of the Navigation menu options.

It's not covering the Links menu so that one does not have any problems.

If you remove #crwrap (or move it to the background using z-index: -999), it works fine for me.

Upvotes: 1

Chris
Chris

Reputation: 10338

Your JS to show the menus is toggled by mouseover and mouseout of the elements in your menu section. The submenus are not nested inside these elements. Therefore, when you move the mouse down toward the submenu, you trigger the mouseout on the main menu item, which is hiding the submenu.

I would recommend nesting the submenu items inside the main menu item's container.

I would also advise you check out the excellent alistapart.com article about CSS hybrid menus. It has some excellent pointers and techniques you might find useful.

Upvotes: 0

Related Questions