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;
	float:left; /* added by phiw */
	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;
}
/* added by phiw */
		/* hide from IE Mac \*/
			#topnav A {
			float:none;
			}
	/* end hide */	
#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;
	float:left; /*addd by phiw */
	text-decoration:none;
	margin:0;
	padding: 2px 12px 2px 10px;
}
/* added by phiw */
		/* hide from IE Mac \*/
			#subnav A {
			float:none;
			}
	/* end hide */	
#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>

A note about this document

This is an edited version of the “clagnut tabs” created by Richard Rutter, and located here; see his blog post on the subject.. Richards version doesn't work correctly in IE5.x Mac. Some simple edits (marked as bold in the side column) made that possible. Basically, IE mac requires a width to be declared on the floated blocks. This can be worked around by also floating the linkblocks within the floated listitems. Other browsers do not need this, and I've then reset that styling for them (using the backslash hack).

Phiw, june 2003, edited January 2004 — wrote a short explanation.

l-c-n.com