Question

I am creating a dropdown menu for a WordPress template and I want the main menuitem to have the same color the subitems have when they are hovered. I found many similar questions here on stack overflow and tried their solutions but they don’t seem to work in my case.

I think the solution must be:

parent:hover child { ... }

and it works for example here.

I tried to do the same with my code (please see last CSS selector) but it doesn’t work here.

Answer 1

Update your CSS from:

#menu ul li a:hover {
    background-color: #006699;
    color: #FFFFFF;
}

To

#menu ul li:hover a {
    background-color: #006699;
}
#menu ul li a:hover {
    color: #FFFFFF;
}

Updated example on jsFiddle.