make hover on item change text colour too… CSS trick?

Question

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

 
content

and the text

Answer 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><a href="#">My Link</a></li>
</ul>

ul li a {
 display:block;
}

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

Answer 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.

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

ul{
list-style-type:none;
}

li{
display:inline-block;
}

ul li a:hover{
color:#332419;
display:block;
text-decoration:none;
}

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