Back to CSS Tips
Preview: what the working site looks like.
Linky 1 Linky 2 Linky 3 Linky 4 Linky 5
The markup
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>       
    <div id="container">
		<menu>
			<a href="#">Linky 1</a>
			<a href="#">Linky 2</a>
			<a href="#">Linky 3</a>
			<a href="#">Linky 4</a>
			<a href="#">Linky 5</a>
		</menu> 
    <!--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: 30px auto;
	background: #ccc;
}
menu {
	width: 800px;
	padding: 0;
	overflow: auto;
	background: #00f;
}
	menu a {
		line-height: 30px;
		width: 160px;
		float: left;
		display: block;
		text-align: center;
		list-style: none;
	}
		menu a:link,
		menu a:visited {
			color: #999;
			text-decoration: none;
		}
		menu a:hover,
		menu a:active {
			background: #999;
			color: #f00;
		}