Back to CSS Tips
Preview: what the working site looks like.
The markup
<!doctype html>
<meta charset="utf-8">
<title>Untitled Document</title>
    <div id="container">
        <div id="menu">
            <div class="tab"><a href="#"><span>one</span></a></div>
            <div class="tab"><a href="#"><span>two</span></a></div>
            <div class="tab"><a href="#"><span>three</span></a></div>
html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #fc6;
#container {
	width: 800px;
	margin: 50px auto;
	background: #999;
	overflow: auto;
#menu {
	height: 25px;
	margin: 10px 0 0; 
	padding:0 10px;
	border-bottom: 1px solid black;
.tab {
	height: 25px;
	width: 120px; 
	margin: 0 3px 0;
	float: left;
	background: url(bars.gif) 0 -50px no-repeat;
	.tab a {
		display: block;
		overflow: hidden;
		background: url(bars.gif) top left no-repeat;
		font: bold 13px/1 Georgia, serif;
		color: #039;
		text-decoration: none;
		.tab span {
			padding: 7px 0 0 13px;
			display: block;
			.tab a:hover {
				background-image: none;
				color: #ff0;
			.tab a:active {color: #000;}