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="navlist">
            <li><a href="#">Home</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</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: 50px auto;
	padding: 10px 0 200px 0;
	background: #9cc;
}
ul#navlist {
	padding: 0;
	overflow: auto;
	list-style: none;
	background: #036;
}
	ul#navlist li {display: inline;}
		ul#navlist li a {
			line-height: 30px;
			width: 200px;
			float: left;
			color: #fff;
			background: #036;
			text-align: center;
			text-decoration: none;
		}
		ul#navlist li a:hover {
			background: #c0c0c0;
			color: #00f;
		}