Change text color when hovered over li

Question

I want to change the text color of links when an

element is hovered over. Right now I have

#nav li a:hover {
  margin-left: -10px;
  pad         


        

Answer 1

Then ensure that either the a inherits its colour from its parent:

li:hover a {
    color: inherit;
}

Or specify a selector to explicitly apply the same colour to the a element:

#nav ul li:hover,
#nav ul li:hover a {
  margin-left: -10px;
  padding-left: 10px;
  background-color: #13118C;
  color: white; 
  font-weight: bold;
  width: 100%;
}

You could, of course, also make the a fill the li element, using:

#nav ul li a {
    display: block;
}

If you specify a height for the li, then use that same height (with the previous display: block rule) the a will be vertically-centred within the li as well, for example:

#nav ul li {
    height: 2em; /* or whatever, adjust to taste... */
}
#nav ul li a {
    display: block;
    line-height: 2em;
}

Though the padding of the li won't be included within the specified height (it'll be the height of the element, plus the padding plus the border-width), so there'll be an empty-space around the a, unless you specify (for compliant browsers) box-sizing: border-box; to include the border and padding in the specified height.