Question

I am messing around with a pure CSS dropdown menu and I’ve noticed that when you hover over the top <li> element, it shows the button style, but when you hover over the child <li> element in the dropdown menu, the top <li> element retains the “button state”. I want the “button state” of the parent <li> element to be gone when I hover over any of the items in the dropdown menu. Here is the jsfiddle:

http://jsfiddle.net/AQZ4V/1/

Answer 1

The :hover pseudo-selector applies to elements even if child element is hovered. I can suggest you to apply the “button styles” to the <a> element in the top <li>s.

#nav .current a, #nav li > a:hover {

instead of

#nav .current a, #nav li:hover > a {

jsFiddle Example