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

There are lots of good suggestions above, but I wanted to mention the reason why your CSS rules did not work, which is because of specificity. Each CSS selector you define has a calculated specificity, which you can read about here. http://www.w3.org/TR/css3-selectors/#specificity. Those values are used to determine which rules take precedence over others.

Note that inherited selectors have a specificity of 0, which is important in your case.

#nav ul li { color: #000; }
#nav ul li a { color: #800; }      // This has a specificity of 103 when applied to  elements
#nav ul li:hover { color: #080; }  // This has a specificity of 0 when applied to  elements because it is inherited from the parent 
 element.

Example: http://jsfiddle.net/rg4fN/

By appending an a element to the last selector, it will no longer be inherited when applied to elements. It now has a higher specificity than the other selectors and thus will take precedence.

#nav ul li a { color: #800; }        // This has a specificity of 103 when applied to  elements 
#nav ul li:hover a { color: #080; }  // This has a specificity of 113 when applied to  elements

Example: http://jsfiddle.net/NxT29/