A solid navigation menu can make or break a website for one obvious reason: If users can’t find your content they won’t read it. For this reason I believe it’s a good idea to make it as backwards compatible as possible.

The example below is fairly simple but will work in nearly all browsers from IE 5 to the latest version of Chrome!

It can be combined with newer technology, such as jQuery’s LavaLamp, to achieve a better end result whilst retaining graceful degradation.

The required code is short and sweet but supporting older browsers usually requires such.

Firstly, some styling…

<style type="text/css">
*{margin:0; padding:0; line-height:1em; font-size:12px; font-weight:normal; /* Clear browser based CSS */
	font-family:Verdana, Geneva, sans-serif; border:none}
body{ text-align:center} /* IE5 center align div */
#float{width:470px; margin:50px auto;} /* Center navigation on page */
#navigation {padding:0 0 0 10px;
	list-style-type:none;
	background:#eee; height:40px;
	border-bottom:2px solid #CDCDCD;}
#navigation li {float:left; margin:0;}
#navigation li:hover {float:left; margin:0; border-bottom: 2px solid #36489C;}
#navigation li.active{float:left; margin:0; border-bottom: 2px solid #E91D58;}
#navigation li a {text-decoration:none; display:block; padding:0 20px; line-height:40px; color:#36489C;}
#navigation li a:hover {text-decoration:none; display:block; padding:0 20px; line-height:40px; color:#E91D58;}
#navigation li.active a:hover{float:left; margin:0; color:#E91D58}
</style>

 
And the HTML

<div id="float">
	<ul id="navigation">
		<li><a href="#">Home</a></li>
		<li class="active"><a href="#">Products</a></li>
		<li><a href="#">Information</a></li>
		<li><a href="#">News</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</div>

 
The end result should look like this:

Simple CSS Menu

That’s all there is to it. A simple navigation menu that will display nicely in even the most deprecated of browsers.