title: CSS nav bar current page color alteration
body: <p>I'm trying to make it so that I can add a class to the link for the current page and the background will stay filled in teal (As it would when hovered)</p>
  
  <p>However, as it is at the moment, the link text is displaying in the teal still(pic part 1), even though the css says display it white (pic part 2)</p>
  
  <p>the css I have is:</p>
  
  <pre><code>#nav a:link, a:visited {
      font-weight: bold;
      color: #066;
      text-align: center;
      padding: 8px;
      text-decoration: none;
      text-transform: uppercase;
  }
  #nav a:hover, a:active {
      display: block;
      background-color: #066;
      color: #fff;
  }
  #nav a.selected:link, a.selected:active{
      display: block;
      background-color: #066;
      color: #fff;
  }
  
  #nav a.selected:hover, a.selected:active {
      display: block;
      background-color: #066;
      color: #fff;
  }
  </code></pre>
  
  <p>the html is </p>
  
  <pre><code>&lt;div id="nav"&gt;
                  &lt;ul&gt;
                      &lt;li &gt;&lt;a href="" class="selected"&gt;HOME&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=""&gt;ABOUT&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=""&gt;SOLUTIONS&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=""&gt;CONSULTANCY&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=""&gt;SUPPORT&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=""&gt;CONTACT US&lt;/a&gt;&lt;/li&gt;
  
              &lt;/ul&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/UIH9q.png" alt="Nav Bar"></p>
  
  <p>When I inspect the element in firefox, its showing that the color should be white. So it should be showing correctly, but it's not. Any idea what I'm doing wrong? I've cleared cache and that didnt sort it.</p>