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">
        <nav id="demo">
            <ul>
                <li><a href="#">linky</a></li>
                <li><a href="#">linky</a></li>
                <li><a href="#">linky</a></li>
                <li><a href="#">linky</a></li>
                <li><a href="#">linky</a></li>
            </ul>
		</nav>
    <!--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;
	overflow: auto;
	background: #999 url('images/IMG_6222-Cape-Elrington.jpg') no-repeat center 50px;
}
nav#demo {
	line-height: 100px;
	min-width: 800px;
	margin: 50px 0 0;
	background: transparent;
	text-align: center;
}
	nav#demo ul { 
		padding: 0;
		list-style: none; 
	}
		nav#demo ul li {display: inline-block;}
			nav#demo ul li a:link,
			nav#demo ul li a:visited {
				padding: 5px 20px;
				display: block;
				background: rgba(10, 10, 10, .2);
				border: 1px solid black;
				border-radius: 5px;
				text-align: center;
				text-decoration: none;
				color: #ccc;
			}
			nav#demo ul li a:hover,
			nav#demo ul li a:active {
				background: rgba(10, 10, 10, .4);
				color: #f00;
			}