title: CSS Navigation Menu Using Sprite: How to highlight current page's tab/button?
body: <p>I've built a CSS navigation menu using a sprite, very similar to the one on <a href="http://www.apple.com" rel="nofollow noreferrer">Apple's website</a>. I've got it working fine, such that it changes to the right position on the image on hover and mousedown (all using CSS), but I'm having a hard time figuring out how to make a button stay highlighted once it's clicked. I have a row in my sprite for the "clicked" look, but there's no CSS that I know of to handle something that's selected. I want the buttons to turn to their "clicked" version, depending on which one has been clicked. I've explored some javascript solutions, using jQuery, but I thought there might be a better way.</p>
  
  <p>The sprite I'm using is very similar to Apple's, found <a href="http://images.apple.com/global/nav/images/globalnavbg.png" rel="nofollow noreferrer">here</a>.</p>
  
  <p>Any help would be greatly appreciated. Thanks.</p>
  
  <p><strong>More Info:</strong></p>
  
  <p>So my menu currently looks like this in html:</p>
  
  <pre><code>    &lt;ul id="global_nav"&gt;
          &lt;li id="home_nav"&gt;&lt;a href="&lt;%= Url.Action("Index", "Home") %&gt;"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li id="systems_nav"&gt;&lt;a href="&lt;%= Url.Action("Index", "Home")%&gt;"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li id="users_nav"&gt;&lt;a href="&lt;%= Url.Action("Index", "Home")%&gt;"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li id="utilities_nav"&gt;&lt;a href="&lt;%= Url.Action("Index", "Utilities")%&gt;"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li id="reference_nav"&gt;&lt;a href="&lt;%= Url.Action("Index", "Home")%&gt;"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li id="metrics_nav"&gt;&lt;a href="&lt;%= Url.Action("Index", "Home")%&gt;"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li id="help_nav"&gt;&lt;a href="&lt;%= Url.Action("Index", "Home")%&gt;"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li id="info_nav"&gt;&lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>Any my CSS is all here (sorry, it's long):</p>
  
  <pre><code>#global_nav 
  {
      background: url("../Images/nav_bar.png");
      height: 38px;
      width: 979px;
      padding: 0;
      list-style-image: none;
      list-style-position: outside;
      list-style-type: none;
  }
  
  #global_nav li
  {
      float: left;
  }
  
  #global_nav a 
  {
      height: 38px;
      display: block;
  }
  
  #global_nav #home_nav 
  {
      width: 118px;
  }
  
  #global_nav #home_nav a:hover 
  {
      background: url("../Images/nav_bar.png") 0px -37px no-repeat;
  }
  
  #global_nav #home_nav a:active
  {
      background: url("../Images/nav_bar.png") 0px -74px no-repeat;
  }
  
  #global_nav #systems_nav
  {
      width: 116px;
  }
  
  #global_nav #systems_nav a:hover 
  {
      background: url("../Images/nav_bar.png") -118px -37px no-repeat;
  }
  
  #global_nav #systems_nav a:active
  {
      background: url("../Images/nav_bar.png") -118px -74px no-repeat;
  }
  
  #global_nav #users_nav
  {
      width: 117px;
  }
  
  #global_nav #users_nav a:hover 
  {
      background: url("../Images/nav_bar.png") -234px -37px no-repeat;
  }
  
  #global_nav #users_nav a:active
  {
      background: url("../Images/nav_bar.png") -234px -74px no-repeat;
  }
  
  #global_nav #utilities_nav
  {
      width: 117px;
  }
  
  #global_nav #utilities_nav a:hover 
  {
      background: url("../Images/nav_bar.png") -351px -37px no-repeat;
  }
  
  #global_nav #utilities_nav a:active
  {
      background: url("../Images/nav_bar.png") -351px -74px no-repeat;
  }
  
  #global_nav #reference_nav
  {
      width: 117px;
  }
  
  #global_nav #reference_nav a:hover 
  {
      background: url("../Images/nav_bar.png") -468px -37px no-repeat;
  }
  
  #global_nav #reference_nav a:active
  {
      background: url("../Images/nav_bar.png") -468px -74px no-repeat;
  }
  
  #global_nav #metrics_nav
  {
      width: 117px;
  }
  
  #global_nav #metrics_nav a:hover 
  {
      background: url("../Images/nav_bar.png") -585px -37px no-repeat;
  }
  
  #global_nav #metrics_nav a:active
  {
      background: url("../Images/nav_bar.png") -585px -74px no-repeat;
  }
  
  #global_nav #help_nav
  {
      width: 117px;
  }
  
  #global_nav #help_nav a:hover 
  {
      background: url("../Images/nav_bar.png") -702px -37px no-repeat;
  }
  
  #global_nav #help_nav a:active
  {
      background: url("../Images/nav_bar.png") -702px -74px no-repeat;
  }
  
  #global_nav #info_nav
  {
      width: 163px;
  }
  
  #global_nav #info_nav a:hover 
  {
      background: url("../Images/nav_bar.png") -819px -37px no-repeat;
  }
  
  #global_nav #info_nav a:active
  {
      background: url("../Images/nav_bar.png") -819px -74px no-repeat;
  }
  </code></pre>