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">
            <div id="menu">
                <ul>
                      <li><a href="" title="Back to where you started"><span>Home</span></a></li>
                      <li><a href="" title="Link 2"><span>About</span></a></li>
                      <li><a href="" title="Link 3"><span>News</span></a></li>        
                      <li><a href="" title="Link 4"><span>FeedBack</span></a></li>
                      <li><a href="" title="Link 5"><span>Billing</span></a></li>
                      <li><a href="" title="Link 6"><span>Help &amp; Support</span></a></li>
                      <li><a href="" title="Link 7"><span>Contact Us</span></a></li>
                </ul>
            <!--end menu--></div>    
    <!--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;
	padding: 10px 0;
	background: #9fc;
}
#menu {
	width: 100%;
	overflow: auto;
	background: #efefef;
	border-bottom: 1px solid #666;
}
	#menu ul {
		margin: 10px;
		padding: 0;
		list-style: none;
	}
		#menu li {display: inline;}
			#menu a {
				padding: 0 0 0 4px;
				float: left;
				background: url(left.gif) no-repeat left top;
				text-decoration: none;
			}
			#menu a span {
				padding: 5px 15px 4px 6px;
				float: left;
				display: block;
				background: url(right.gif) no-repeat right top;
				color: #666;
			}
				#menu a:hover {background-position: 0% -42px;}
				#menu a:hover span {
					background-position: 100% -42px;
					color: #fff;
				}
		
The sliding door images
left image right image