Tabbed Navigation

This is a tabbed navigation treatment created exclusively with CSS. There is absolutely no Javascript in place here. This is a copy from Doug Bowman's article on A List Apart and I am not about to take anything close to credit for this. I have made some super minor alterations to it, but overall, its nothing more than lifting what Doug did on A List Apart. When you hover over the other live links, the font and the background changes to reflect what is the live link and where the user is presently located.

 


You will also need the following images:

The markup for the navigation you see above is as follows.

  <div id="navheader">
   <ul>
    <li><a href="#">Homepages</a></li>
    <li id="current"><a href="#">News</a></li>
    <li><a href="products.htm">Products</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
   </ul>
  </div>