title: How to change text color (and background) on nav bar links when hovering?
body: <p>I would like to change the color of the text on my navigation bar links when hovering over them. I have the background changing but I want both the background and text to change when hovering. Notice it works on the sub links but not the main navigation links.</p>
  
  <p>Can someone show me how to make the text change color when hovering over them?</p>
  
  <p>Here are my results: <a href="http://jsfiddle.net/BWnta/13/" rel="nofollow">http://jsfiddle.net/BWnta/13/</a></p>
  
  <p>Thank you.</p>
  
  <p>Here is the html:
      
      
      
          SJ Expo NavBar Dropdown HTML5
          </p>
  
  <pre><code>    &lt;link rel="stylesheet" href="NavBar-MonctonExpo.css" type="text/css" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
  &lt;/head&gt;
  
  
  &lt;div id="nav"&gt;
      &lt;div id="nav_wrapper"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="http://wellness-expo.com/index.htm" TARGET="_blank"&gt;Main&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt; &lt;a href="http://wellness-expo.com/Moncton/Wellness-Expo-Moncton.htm"&gt;Moncton&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt; &lt;a href="http://wellness-expo.com/Moncton/Seminars.htm"&gt;Lecture Schedule&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="http://wellness-expo.com/Moncton/Lecture/Schedule.htm"&gt;Spring&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://wellness-expo.com/Moncton/Lecture/Fall/Schedule.htm"&gt;Fall&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt; &lt;a href="http://wellness-expo.com/Moncton/Exhibitors.htm"&gt;Exhibitor List&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="http://wellness-expo.com/Moncton/Exhibitor-List-Spring.htm"&gt;Spring&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://wellness-expo.com/Moncton/Exhibitor-List-Fall.htm"&gt;Fall&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt; &lt;a href="http://wellness-expo.com/Moncton/ToExhibit.htm"&gt;To Exhibit&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="http://wellness-expo.com/Moncton/ToExhibit-Spring.htm"&gt;Spring&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://wellness-expo.com/Moncton/ToExhibit-Fall.htm"&gt;Fall&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;           
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="http://wellness-expo.com/Moncton/Contact-Us.htm" TARGET="_blank"&gt;Contact Us&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;!-- Nav wrapper end --&gt;
  &lt;/div&gt;
  &lt;!-- Nav end --&gt;
  
  &lt;/html
  </code></pre>
  
  <p>HERE IS THE CSS:</p>
  
  <pre><code>    #body {
      padding: 0;
      margin: 0;
      font-family: Arial;
      font-size: 17px;
  }
  #nav {
      background-color: #DFF7EB;
      font-family: Arial;
  }
  #nav_wrapper {
      width: 800px;
      margin: 0 auto;
      text-align: center;
  }
  #nav ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
      position: relative;
      min-width: 200px;
  }
  #nav ul li {
      display: inline-block;
  }
  #nav ul li:hover {
      background-color: #C6F7D4;
      color:#FFF;
  }
  #nav ul li a, visited {
      color: #69716D;
      display: block;
      padding: 15px;
      text-decoration: none;
  }
                              /*notes--old text or background colors (CCC, 4a0,  )*/
  
  #nav ul li:hover ul {
      display: block;
      color: #FFF;
  }
  #nav ul ul {
      display: none;
      position: absolute;
      background-color: #C6F7D4;
  }
  #nav ul ul li {
      display: block;
  }
  #nav ul ul li a:hover {
      color: #FFF;
  }
  </code></pre>