悬停效果不会更改锚链接的颜色

Question

I have a menu which is supposed to change the color of the anchor link on hovering over the li but the problem is that the hover effect only works when I hover over the anchor link.

<div style="background-color:#FFFFFF" id="menu" class="menu">
  <ul class="links">

    <li><a href="news-265.html" class="active">News &amp; Views</a> » </li>

    <li><a href="facts-269.html">Quick Facts </a>  </li>

    <li><a href="media-releases-268.html">Media Releases</a>  </li>

    <li><a href="gallery-270.html">Photo Gallery</a>  </li>

    <li><a href="social-media-271.html">Social Media Channels</a>  </li>

    <li><a href="contacts-272.html">Media Contacts </a>  </li>
  </ul>
</div>


body {
  font-family: 'Raleway', sans-serif;
}

#menu a {
  color:#76b900;
}

#menu li:hover {
  background:#76b900;
  color:#FFFFFF;
  text-decoration:none;
}

#menu a:hover {
  background:#76b900;
  color:#FFFFFF;
  text-decoration:none;
}

#menu li {
  padding: 12px 0 13px 10px; 
  border-bottom: none;  
}

Here is a link to my JSBin.

Answer 1

You could get rid of the hover over the list element, change the anchor display to block, and then only hover the anchor.

HERE is a fiddle.

You can then play with the css of the anchor to get the size of the block.

#menu a {
  display: block;
  color:#76b900;
  width: 200px;
  text-decoration: none;
}

Answer 2

you can use this

#menu li:hover > a 
{
color:#FFFFFF;
}

Answer 3

#menu a {
  color:#76b900;
  text-decoration:none;
}

#menu li:hover {
  background:#76b900;
  color:#ffffff;

}

#menu li:hover a {
 color:#ffffff;
}

Answer 4

尝试#menu li:hover a代替#menu a:hover 。