Make Hover On item Change Text Colour Too... Css Trick?

I have some menu bars, and at the moment, the Background changes to black when hovering over an

content

and the text changes from black to white when it is

Solution 1:

I'd recommend making the hover work on the 'A' elements instead of the LI elements.

In order to make the LI elements flly clickable you need to set the 'A' element within it to display:block (or inline-block) as 'A' tags are display:inline by default.

SO...

<ul><li><ahref="#">My Link</a></li></ul>

ul li a {
 display:block;
}

ul li a:hover, ul li a:focus {
 color:red;
}

Solution 2:

I found that if you use padding for the "a" instead of the "li" it works well. By blocking out the padding you can then hover over the padded area within the div and the "a" links inside (that are padded) will hover a color of their own.

ullia{
color:#ead6b7;
display:block;
text-decoration:none;
padding:16px;
}

ul{
list-style-type:none;
}

li{
display:inline-block;
}

ullia:hover{
color:#332419;
display:block;
text-decoration:none;
}

li:hover{
background-color:#ead6b7;
}