cssbit 2.0

<!-- start tabs -->
<ul id='tabs'>
  <li>home</li>
  <li>archive</li>
  <li>search</li>
  <li>contact</li>
</ul>
<!-- end tabs -->

ul#tabs {
  list-style: none;
  margin: 10px 0 0;
  overflow:  auto;
  padding: .5em;
 
}

ul#tabs li {
  text-transform: uppercase;
  font-size: x-small;	
  margin: 0 5px 0 0;
  border: 1px solid #ddd;	
  float: left;	
}

<li><a href='#'>home</a></li>
<li><a href='#'>archive</a></li>

ul#tabs li a {
	display: block;
	color:#333;
	text-decoration: none;
	padding: .5em .98em;
 
}

ul#tabs li a:hover {	
	color:#5E5E5E;
}

<ul id='tabs'>
  <li class='current'><a href='#'>home</a></li>
</ul>

ul#tabs li.current a {
	color:#02A1ED
 
}

ul#tabs li.current a:hover {
	color:#015D88
}

ul#tabs li {
 float: left;
 text-transform: uppercase;
 font-size: x-small;
 background:  url(../images/tabs.gif) no-repeat 0% -52px;
 border-bottom: 1px solid #ddd;
}

ul#tabs li a {
 display: block;
 color:#333;
 text-decoration: none;
 outline: 0;
 padding: .5em .98em;
 background:  url(../images/tabs.gif) no-repeat 100% -78px;
}

ul#tabs li a:hover {	
 color:#5E5E5E;
 text-decoration: none;
}

ul#tabs li.current {
 background-position:  0% 0px;
 border: none
 
}

ul#tabs li.current a {
 background-position: 100% -26px;
 color:#02A1ED
 
}

ul#tabs li.current a:hover {
 color:#015D88
}