Horizontal Block Navigation

This is a basic horizontal block navigation treatment created exclusively with CSS. There is absolutely no Javascript in place here. The inspiration and learning for this came from A List Apart, Jeffrey Zeldman via Accessify's List-O-Matic. I have made a couple of changes here and there to make it work the way I want it to. The only bug I see is that when you hover over the "current" link in NN, the text changes color to the hover state. I employ this navigation treatment on my fixed width stylesheet for this very site. This horizontal block navigation scheme is formatted so that:

1. The page that the user is currently on is indicated by a different color treatment.
2. When you move the cursor over each navigation selection, the link changes color and the font is bolded.

When you hover over the other live links, the background color and, in this example, the font changes color. Check it out below.

The markup for the navigation you see above is as follows. To see the markup for the sub-navigation, click the "Go to Subnav" link.

• Download Style Sheet

  <div id="navheader">
   <ul>
    <li id="current"><a>Index</a></li>
    <li><a href="index2.htm">Page 2</a></li>
    <li><a href="#">Dead Link</a></li>
    <li><a href="#">Dead Link</a></li>
    <li><a href="#">Dead Link</a></li>
   </ul>
  </div>