CODEWITHSUNDEEP
htmlcsshoverparent-child
Katy
Katy

Reputation: 199

Parent ul should change when I hover child il

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.

Upvotes: 1

Views: 612

Answers (2)

Kevin Boucher
Kevin Boucher

Reputation: 16675

You can get the effect you'd like by replacing the last CSS declaration in your fiddle with this:

.menu ul li:hover > a {
    background-color: #006699;
    color: #fff !important;
}

Upvotes: 0

Mathachew
Mathachew

Reputation: 2034

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.

Upvotes: 1

Related Questions