Nav drop down with rounded corner troubles

Question

I have worked on the following nav drop down seen here.

It works and is almost complete, but I have one issue. When you mouseover a nav title the text goes from color to black and then shows the dropdown. That is how it should work, but when you move your mouse to go a nav title within the dropdown the black text(active image) goes back to color and doesnt remain black.

Any suggestion when dropdown is active and user is navigating through such to keep the text(active image) black?

Answer 1

Ideally, you would be using text rather than images for the menu items. Then, you could very easily use CSS to control the text colors on hover over the <li> without any need for JavaScript at all.

With the way you're doing it now (with images), I believe it's still possible by moving your onmouseover and onmouseout from the <a> to the <li> above it. It may require some tweaking of the scripts for this to work, but hopefully you get the concept: detect hovering over the entire list item (and its contents) rather than on just the anchor tag within that list item.

Answer 2

How about putting the menu item, along with its drop down in a container (div probably) that expands to include the dropdown menu, and then use a CSS selector including :hover on that container, that drills down to the item text. As long as they are still on the menu or its dropdown, it should still be covered by the hover selector.

Answer 3

You can use CSS ot JS to change the title's color when the mouse hovers the <li> that contains the title instead of when it hovers the title itself.