多个悬停状态存在问题-不知道是相邻选择器还是同级选择器？

Question

It's always the little thing that get me unstuck. I'm trying to make a hover on a navigation element effect 3 elements. The background colour, the text colour, and the small arrow below the text.

The background colour is easy enough, but the text colour only changes when you hover over the actual text - not the whole block element (framed by the background colour). Also, I wanted to image swap the little arrow beneath the text as well. Example:

Here is the site:

MACI test website

I've read up on adjacent and sibling selectors - but I can't quite get it to do what i want. It's probably really obvious, but I can't see it at the moment! Any help would be appreciated :)

Answer 1

Put the coloring on the link instead of the li, and make the link a block element to fill up the li area:

ul.menu a {
    display:block;
    background-color:#FFFFFF;
}
ul.menu a:hover {
    background-color:#AE242A;
    color:#FFFFFF;
}

Also, you could put the arrow image as a non-repeating background image for the link, and set a different one for the regular link and the hover link.

Another thought, have you tried:

ul.menu li.nav-links:hover a.nav {
    color:#FFFFFF;
}