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="container">
		<ul id="nav">
			<li><a href="#">one</a></li>
			<li><a href="#">two is long</a></li>
			<li><a href="#">three can be longer</a></li>
			<li><a href="#">four</a></li>
			<li><a href="#">five</a></li>
		</ul>
	<!--end container--></div>
</body>
</html>
        
The CSS
html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #fc6;
}
#container {
	width: 800px;
	margin: 0 auto;
	background: #999;
	overflow: auto;
}
ul#nav {
	margin: 0 0 600px;
	list-style: none;
	text-align: center;
}
	ul#nav li, ul#nav li a {
		line-height: 45px;
		display: inline-block;
	}
		ul#nav li {
			background: url(images/nav-on.gif) repeat-x;
			border: 1px solid #000;
		}
			ul#nav li a {
				padding: 0 20px;
				background: url(images/nav-off.gif) repeat-x;
				text-decoration: none;
				color: #fff;
			}
				ul#nav li a:hover { background: transparent; }
		
The images that makes this menu work:
menu graphics menu graphics