<li> Tag Nav Bars With Sprites And No Javascript

This example uses a simple sprite for the rollover state - since there's no transparency here, I just used a jpg for the image. The text for the current page is highlighted using a <span> tag around it. There's an active state as well that you can see if you click-drag-release a button.

These examples use a more complex sprite for the rollover state. The gif image, box size, and padding must all be adjusted for each state to create the effect of the button being pressed down. Using a gif with transparency allows for a constant box size, eliminating the flicker. Here, both examples look the same, but the code differs slightly. The first uses a <span> tag around the text to highlight it. The second assigns an id to the <a> tag to highlight the text.

Why bother creating a new id? If you duplicate ALL of the a:hover traits, the button appears down as well as highlighted. However, adding "ul#NavBarSprite2 a#Down" to your css by itself seems to negate any rollover effects. This is acceptable, but if you want to see any action here, you'll also need to add "ul#NavBarSprite2 a:hover#Down" to your css. In this case, it redefines just the font color.

The only real drawback I've not found a fix for is that I want to have a single class to define the highlight color sitewide and there seems to be no place to work it in here. Using the <span> tag around the text will negate the rollover effect, so it seems you'll just have to remember the color and assign it to this rollover id as well. Below is an example using prettier buttons.

NOTES AND CODE:
I like this so much, I'm going to use it as my new nav bar code!
A few things about this code: Because these image buttons don't require any adjustments to the margins or padding on rollover, I stripped all that out. The other examples may be a bit over-defined in that regard, but this is the minimal code for this nav bar (although I suppose you could reduce the colors to the 3 letter hex format "#066"). Note in the css that you need to define your visited state BEFORE active and hover or it will over-ride them and you'll only get the visited state. Active is kind of useless on a nav bar, but I included it here for reference. Also, it seems you have to be specific with your height definition if you want a margin below the bar. Using a "height:auto" definition causes the margin-bottom definition to be ignored.

Here's the html: (The NavFont class just defines font family, size, and weight, as well as line-height.)
<div style="height:20px; width:auto; margin-bottom:10px;" class="NavFont">
<ul id="NavBar">
<li><a href="z1.html" target="_self" id="On">Home</a></li>
<li><a href="z2.html" target="_self">About Us</a></li>
<li><a href="z3.html" target="_self">Services</a></li>
<li><a href="z4.html" target="_self">Products</a></li>
<li><a href="z5.html" target="_self">Contact</a></li>
</ul>
<!--Navbox--></div>

And here's the css:
ul#NavBar {list-style:none; padding:0px; margin:0px; width:auto; float:left; }
ul#NavBar li {display:inline; padding:0px; margin:0px; float:left; }
ul#NavBar a {width: 95px; height: 20px; float:left;
    text-align:center; padding:0px; margin:0px; text-decoration:none;
    color:#ffffff; background:url(../Images/Buttons/ButtonsTeal2.gif) 0px 0px }
ul#NavBar a:visited {color:#aaffff; }
ul#NavBar a:active {color:#aaffff; background:url(../Images/Buttons/ButtonsTeal2.gif) 0px -20px }
ul#NavBar a:hover {color:#006666; background:url(../Images/Buttons/ButtonsTeal2.gif) 0px -20px }
ul#NavBar a#On {color:#00ffff; }
ul#NavBar a:hover#On {color:#006666; }

Finally, here's the image: (Right-click to "Save Picture As..." if you want it.)