Back to CSS Tips
Preview: what the working site looks like.
The markup
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
	<div id="page">
		<ul id="navlist">
			<li id="navlisthome"><a id="homelink" href="index.html"><span>home</span></a></li>
			<li id="navlistpricing"><a href="pricing.html"><span>pricing</span></a></li>
			<li id="navlistdemo"><a href="demo.html"><span>demo</span></a></li>
			<li id="navlistorder"><a href="orderform.html"><span>order</span></a></li>
			<li id="navlistfaq"><a href="faq.html"><span>faq</span></a></li>
			<li id="navlistcontact"><a href="contact.html"><span>contact</span></a></li>
	  </ul>
    <!--end page--></div>
</body>
</html>
        
The CSS
html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #fc6;
}
#page {
	width: 630px;
	margin: 0 auto;
	padding: 0 0 150px;
	background: #0f0;
}
ul#navlist {
	width: 630px;
	height: 38px;
	padding: 0;
	list-style: none;
	background: url(graphics/navbar.gif) no-repeat 0 0;
}
	ul#navlist li {
		display: inline;
		height: 38px;
		width: 630px;
	}
		ul#navlist li a {
			height: 38px;
			width: 105px;
			float: left
		}
			#navlisthome a {width: 105px; background: url(graphics/navbar.gif) no-repeat 0 0;}
			#navlisthome a#homelink {background-position: 0 -38px;}
			#navlisthome a:hover {background-position: 0 -76px;}	
						#navlistpricing a {width: 105px; background: url(graphics/navbar.gif) no-repeat -105px 0;}
						#navlistpricing a#pricinglink {background-position: -105px -38px;}
						#navlistpricing a:hover {background-position: -105px -76px;}
			#navlistdemo a {width: 105px; background: url(graphics/navbar.gif) no-repeat -210px 0;}
			#navlistdemo a#demolink {background-position: -210px -38px;}
			#navlistdemo a:hover {background-position: -210px -76px;}
						#navlistorder a {width: 105px; background: url(graphics/navbar.gif) no-repeat -315px 0;}
						#navlistorder a#orderlink {background-position: -315px -38px;}
						#navlistorder a:hover {background-position: -315px -76px;}
			#navlistfaq a {width: 105px; background: url(graphics/navbar.gif) no-repeat -420px 0;}
			#navlistfaq a#faqlink {background-position: -420px -38px;}
			#navlistfaq a:hover {background-position: -420px -76px;}
						#navlistcontact a {width: 105px; background: url(graphics/navbar.gif) no-repeat -525px 0;}
						#navlistcontact a#contactlink {background-position: -525px -38px;}
						#navlistcontact a:hover {background-position: -525px -76px;}
			#navlist li a span {display: none;}
		
The image that makes this menu work:
menu graphics