html - Problems with multiple hover states - not sure if adjacent or sibling selectors? -


it's little thing me unstuck. i'm trying make hover on navigation element effect 3 elements. background colour, text colour, , small arrow below text.

the background colour easy enough, text colour changes when hover on actual text - not whole block element (framed background colour). also, wanted image swap little arrow beneath text well. example:

enter image description here

here site:

maci test website

i've read on adjacent , sibling selectors - can't quite want. it's obvious, can't see @ moment! appreciated :)

put coloring on link instead of li, , make link block element fill li area:

ul.menu {     display:block;     background-color:#ffffff; } ul.menu a:hover {     background-color:#ae242a;     color:#ffffff; } 

also, put arrow image non-repeating background image link, , set different 1 regular link , hover link.

another thought, have tried:

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

Comments

Popular posts from this blog

google api - Incomplete response from Gmail API threads.list -

Installing Android SQLite Asset Helper -

Qt Creator - Searching files with Locator including folder -