title: CSS Menu List and OnClick (active color)
body: <p>I've created a menu from a tutorial I found online and I'm looking to take it one step further. I'd like to have each link completely change to the background color specified when it's clicked on. I tried using a:active but that didn't seem to work. Here's what I have so far, maybe I need to use some J-Query? Here's the <a href="http://jsfiddle.net/EDZ8F/" rel="nofollow">fiddle</a> and code</p>
  
  <pre><code>&lt;div style="width: 1000px; margin: 0 auto; text-align:center; "&gt;
  &lt;ul id="menu"&gt;
  &lt;li&gt;&lt;a class="anchor" href="#welcomeanchor"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a class="anchor" href="#aboutusanchor"&gt;About Us &lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a class="anchor" href="#classesanchor"&gt;Classes &lt;/a&gt; &lt;/li&gt;
  &lt;li&gt;&lt;a class="anchor" href="#scheduleanchor"&gt;Schedule&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a class="anchor" href="#newsanchor"&gt;News&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a class="anchor" href="#programsanchor"&gt;Programs&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a class="anchor" href="#contactanchor"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code> #menu {
      width: 940px; 
      margin: 0 auto;}
      ul li {
      background:#000;
      list-style: none;
      height: 50px;
      float:left;
      padding:0 0;
      }
      ul li a {
      font-family: font3;
      width: 134px;
      height: 50px;
      line-height: 53px;
      border-bottom: 6px solid #636393;
      color: #fff;
      font-size:13px;
      text-transform: uppercase;
      text-align:center;
      text-decoration: none;
      display: block;
      -webkit-transition: .2s all linear;
      -moz-transition: .2s all linear;
      -o-transition: .2s all linear;
      transition: .2s all linear;
      }
      li:nth-child(1) a {
      border-color: #fff;
      }
      li:nth-child(2) a {
      border-color: #FF6;
      }
      li:nth-child(3) a {
      border-color: #F60;
      }
      li:nth-child(4) a {
      border-color: #00F;
      }
      li:nth-child(5) a {
      border-color: #0C6;
      }
      li:nth-child(6) a {
      border-color: #63C;
      }
      li:nth-child(7) a {
      border-color: #F00;
      }
      li:nth-child(1) a:hover {
      color: #000;
      border-bottom: 55px solid #fff;
      height: 1px;
      }
      li:nth-child(2) a:hover {
      color: #000;
      border-bottom: 55px solid #ff6;
      height: 1px; }
      li:nth-child(3) a:hover {
      border-bottom: 55px solid #f60;
      height: 1px; }
      li:nth-child(4) a:hover {
      border-bottom: 55px solid #00f;
      height: 1px; }
      li:nth-child(5) a:hover {
      border-bottom: 55px solid #0c6;
      height: 1px; }
      li:nth-child(6) a:hover {
      border-bottom: 55px solid #63c;
      height: 1px; }
      li:nth-child(7) a:hover {
      border-bottom: 55px solid #f00;
      height: 1px; }
  </code></pre>