title: adding a current class to current menu item CSS
body: <p>Just trying to add a class to the menu item of the current page so the user know what page they are currently on. But the background-image will not show. I am applying the class to the <code>&lt;a&gt;</code> but I have also added it to the  the <code>&lt;li&gt;</code></p>
  
  <pre><code> &lt;div id="menu"&gt;
                      &lt;ul id='foot'&gt;
  
                          &lt;li&gt;&lt;a class="current" href='index.php'&gt;Home&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href='article-list.php?article_type=test0'&gt;Page 0&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href='article-list.php?article_type=test'&gt;Page 1&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href='article-list.php?article_type=test2'&gt;Page 2&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href='chic.php?page=blogs_full'&gt;Page 3&lt;/a&gt;&lt;/li&gt;                       
  
                      &lt;/ul&gt;
  
  
              &lt;/div&gt;
  </code></pre>
  
  <p>Style Sheet:</p>
  
  <pre><code>#menu{height:51px;width:900px;background-image:url(../NEW_images/menu_bg.jpg);background-repeat:repeat-x;}
  #menu ul{}
  #menu li {display:inline;font: 20px  Verdana, Helvetica, sans-serif;margin: 0;padding: 0;}
  #menu a {background: url("../images/seperator.gif") bottom right no-repeat;color: #ccc;display: block;float: left;margin: 0;padding: 8px 20px;text-decoration: none;}
  #menu a:hover {background: #2580a2 url("../NEW_images/li_bg.jpg") bottom center repeat-x;color: #fff;padding-bottom: 8px;padding: 8px 20px;}
  .current{background: #2580a2 url(../NEW_images/li_bg.jpg) bottom center repeat-x;color: #fff;padding-bottom: 8px;padding: 8px 20px;}
  #page_num{width:100%; text-align:center; margin:40px 0 20px 0;}
  </code></pre>