title: how to display selected horizontal menu
body: <p>I have a 4 item menu, each of which displays the name of the item as well as the nav icon (using css sprite).  Here is my markup/css:
  <br /></p>
  
  <pre><code>ul { list-style:none outside none; }
  ul li {
      background-color:#000;
      float:left;
      height:100px;
  }
  ul li a {
      background-image:url('sprite.png');
      color:#FFF;
      display:block;
      height:10px;
      padding-top:20px;
      text-align:center;
      width:50px;
  }
  
  ul li.a a { background-position:0px 0px; }
  ul li.b a { background-position:-50px 0px }
  ul li.c a { background-position:-100px 0px }
  ul li.d a { background-position:-150px 0px }    
  -----------------------------------------------------------------
  &lt;ul&gt;
      &lt;li class="a"&gt;&lt;a href="a"&gt;A&lt;/a&gt;&lt;/li&gt;
      &lt;li class="b"&gt;&lt;a href="b"&gt;B&lt;/a&gt;&lt;/li&gt;
      &lt;li class="c"&gt;&lt;a href="c"&gt;C&lt;/a&gt;&lt;/li&gt;
      &lt;li class="d"&gt;&lt;a href="d"&gt;D&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>This all works fine, but say I want to show a different effect on the currently selected item. Specifically, I want to have a different background color, a different icon, and different color text.  What's the best way to do this?  The only way I can think of is adding a 'selected' class to the <code>&lt;li&gt;</code> which I specificy a different background-color and also adding a 'selected' class to the <code>&lt;a&gt;</code> which I specifiy a different background-image and a different color of text.
  <br />
  Something like:
  <br /></p>
  
  <pre><code>ul li.selected { background-color:#FFF; }
  ul li a { color:#000; }
  ul li.a a.selected { background-position:-250px 0px; }
  ul li.b a.selected { background-position:-300px 0px; }
  ul li.c a.selected { background-position:-350px 0px; }
  ul li.d a.selected { background-position:-400px 0px; }
  --------------------------------------------------------------------------
  &lt;ul&gt;
      &lt;li class="a selected"&gt;&lt;a class="selected" href="a"&gt;A&lt;/a&gt;&lt;/li&gt;
      &lt;li class="b"&gt;&lt;a href="b"&gt;B&lt;/a&gt;&lt;/li&gt;
      &lt;li class="c"&gt;&lt;a href="c"&gt;C&lt;/a&gt;&lt;/li&gt;
      &lt;li class="d"&gt;&lt;a href="d"&gt;D&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><br />
  Which don't get me wrong I can do it this way, but I just feel like it's not the way it's supposed to be done.</p>