Example of CSS-driven tabs


The CSS:

BODY {
color: #333;
background-color: #eee;
padding: 0 5%;
margin:0;
font-family: arial, geneva, lucida, sans-serif;
font-size:83.333%;
}

a:link, a:visited {
	text-decoration:none;
	font-weight:bold;
	color: #FF4000;
}

a:hover {
	color:#002c99;
}

#topnav {
	margin:0;
	padding: 0 0 0 12px;
	}
	
#topnav UL {
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
	} 

#topnav LI {
	display: block;
	margin: 0;
	padding: 0;
	float:left;
	width:auto;
	}
	
#topnav A {
	color:#444;
	display:block;
	width:auto;
	text-decoration:none;
	background: #DDDDDD;
	margin:0;
	padding: 2px 10px;
	border-left: 1px solid #fff;
	border-top: 1px solid #fff;
	border-right: 1px solid #aaa;
}
	
#topnav A:hover, #topnav A:active {
	background: #BBBBBB;
	}

#topnav A.here:link, #topnav A.here:visited {
	position:relative;
	z-index:102;
	background: #BBBBBB;
	font-weight:bold;
	}
	
#subnav {
	position:relative;
	top:-1px;
	z-index:101;
	margin:0;
	padding: 0px 0 3px 0;
	background: #BBBBBB;
	border-top:1px solid #fff;
	border-bottom:1px solid #aaa;
	}
	
#subnav UL {
	list-style: none;
	margin: 1px 0 0px 13px;
	padding: 0px;
	border-right: 1px solid #fff;
	border-left: 1px solid #aaa;
	} 

#subnav LI {
	position:relative;
	z-index:102;
	display: block;
	margin: 0;
	padding: 0;
	float:left;
	width:auto;
	}
	
#subnav A {
	color:#fff;
	display:block;
	width:auto;
	text-decoration:none;
	margin:0;
	padding: 2px 12px 2px 10px;
}
	
#subnav A:hover, #subnav A:active {
	color:#444;
	}

#subnav A.here:link, #subnav A.here:visited {
	color:#444;
	}
	
#subnav BR, #topnav BR {
	clear:both;
}

The HTML:

<div id="topnav">
<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#" class="here">About</a></li>
	<li><a href="#">News</a></li>
	<li><a href="#">Proof</a></li>
	<li><a href="#">Process</a></li>
	<li><a href="#">Expertise</a></li>
	<li><a href="#">Help</a></li>
</ul><br />
</div>
<div id="subnav">
<ul>
	<li><a href="#">Vision</a></li>
	<li><a href="#">Team</a></li>
	<li><a href="#">Culture</a></li>
	<li><a href="#">Careers</a></li>
	<li><a href="#" class="here">History</a></li>
	<li><a href="#">Sponsorship</a></li>
</ul><br />
</div>

View the commented version

Phiw, june 2003

l-c-n.com