title: Menu with active LI
body: <p>Maybe fresh eyes can see where i am going wrong with this but i want the active menu item to have a different style... </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="menu"&gt;
      &lt;ul&gt;
          &lt;li id="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Products&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Services&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;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And my CSS:</p>
  
  <pre><code>#menu ul {list-style-type: none;height: 40px;float: left;margin-top: 43px;margin-left:-32px;}
  #menu li {
  float: left;
  }
  #menu li #active {
  background: url(../images/menu-bg-hover.png) no-repeat;
  color: #ffffff;
  }
  #menu li a {
  background: url(../images/menu-bg.png) no-repeat;
  display: block;
  width: 100px;
  height: 40px;
  text-decoration: none;
  font-size: 16px;
  color: white;
  margin: 0 auto;
  text-align: center; 
  padding-top: 10px;
  color:#424242;
  font-family: "Helvetica", Arial, sans-serif; 
  }
  </code></pre>