I've spent quite a bit of time researching how to build the best horisontal CSS navigation, and I believe I've found the perfect method, which I now apply to all of my work - thought it would be a nice thing to share.

The Markup

When developing in Drupal (as we do) one would use the primary and secondary links in the admin to create the navigation, and it looks a little something like this:

<div id="header">
	<ul class="menu">
		<li><a class="active" href="#">home</a></li>
		<li><a href="#">about</a></li>
		<li><a href="#">blog</a></li>
		<li><a href="#">press</a></li>
		<li><a href="#">shout</a></li>
	</ul>
</div>

Styling it

I use a CSS reset that I've written, (which you can spy at if you please) which also defines sensible default styling, so the CSS that I'll share here is to override the defaults. I'm using Fuselagetown's navigation as the example.

#header ul 
{
	margin: 0;
	list-style: none;
}
		
#header ul li 
{
	display: inline;
}

This code removes the default list styles and displays each <li> inline, which IE needs to prevent the navigation to look like a staircase after the CSS below is applied.

#header ul li a 
{
	float: left;
	display: block;
	width:63px;
	margin-right: 10px;
	height: 38px;
	background: url(../images/nav.png) no-repeat top right;
	text-align:center;
	color: #333;
}
		

This code makes each <a> display as a block, which is necessary for the padding to behave properly. In this particular case, where each menu title is of similarish length, I prefer to set a fixed width, and to centre the text. If the title lengths vary, I would not do any of the two, but instead set a suitable padding-left and padding-right, for instance 10px.

The background is a png-8 anti-aliased to the dark grey background colour, which I've drawn in Photoshop. More importantly, it's what we call a sprite: All images in one graphic.

I'm using background-position to place it where I want it.

#header ul li a.active 
{
	background-position: top left;
}
		
#header ul li a:Hover 
{
	background-position: top center;
}
		
#header ul li a.active:hover 
{
	background-position: top left;
}

So, there we go, a horisontal navigation which works across browsers and looks sensible from a usability point of view. A highlighted hover-state, and a distinct current indicator: I'm pleased with it!