title: How to give a different color to a selected list item with CSS?
body: <p>I know this question has been asked so many times before. But I just can't find the right trick for my code. I want a different color for my active list item in the navigation bar. Obviously. Silly little thing. I know. But please try to help. </p>
  
  <p>Here's my <strong>HTML</strong> code:</p>
  
  <pre><code>&lt;div id="container"&gt;  
      &lt;ul id="nav"&gt;  
          &lt;li class="active"&gt;&lt;a href="am_home.html"&gt;Home&lt;/a&gt;&lt;/li&gt;  
          &lt;li&gt;&lt;a href="am_teachingassistants.php"&gt;Teaching Assistants&lt;/a&gt;&lt;/li&gt;  
          &lt;li&gt;&lt;a href="am_courseinfo.php"&gt;Course Info&lt;/a&gt;&lt;/li&gt;  
          &lt;li&gt;&lt;a href="am_timetable.php"&gt;Time Table&lt;/a&gt;&lt;/li&gt;  
      &lt;/ul&gt;  
  &lt;/div&gt;  
  </code></pre>
  
  <p>and Here's the <strong>CSS</strong> file: </p>
  
  <pre><code>#container {
      position: relative;
      top: -2em;
      z-index: 2;
      width: 1200px;
      margin: auto auto;
  }
  
  #nav {
     position: relative;
     float: left;
     margin-left: 400px;
  }
  
  #nav li {
      list-style: none;
      float: left;
      border-right: 1px solid #afc4cc;
  }
  
  #nav li a {
     position: relative;
     z-index: 2;
     float: left;
     padding: 5px 45px;
     font-size: 15px;
     font-weight: bold;
     font-family: helvetica, arial, sans-serif;
     text-decoration: none;
     color: #39aea8;
  }
  
  ul, li {
      margin: 0;
      padding: 0;
  }
  
  ul#nav li a:link,ul#nav li a:visited {
      color: #39aea8;
      text-decoration: none;
  }
  
  ul#nav li a:hover,ul#nav li a:active {
      color: #f4ba51;
      text-decoration: none;
  }
  </code></pre>