HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
CSS
ul#navlist
{
font: bold 11px verdana, arial, sans-serif;
list-style-type: none;
padding-bottom: 24px;
border-bottom: 1px solid #6c6;
margin: 0;
}
ul#navlist li
{
float: left;
height: 21px;
background-color: #cfc;
margin: 2px 2px 0 2px;
border: 1px solid #6c6;
}
ul#navlist li#active
{
border-bottom: 1px solid #fff;
background-color: #fff;
}
li#active a { color: #000; }
#navlist a
{
float: left;
display: block;
color: #666;
text-decoration: none;
padding: 4px;
}
#navlist a:hover { background: #fff; }
NOTE
"The tabs will work in either Opera 7/Win or IE 5.2/Mac but not both
browsers at the same time. In the current demo, they work in IE
5.2/Mac. To add Opera 7/Win compatibility (and remove IE 5.2/Mac
compatibility), remove the float property for the selector #tabnav a.
Alternatively, you can apply Mark Pilgrim's *7 Hack to the float
property, and the tabs should work in both browsers simultaneously."
ABOUT THE CODE
Some lists within the Listamatic site had to be modified so that they could
work on Listamatic's simple list model. When in doubt, use the external
resource first, or at least compare both models to see which one suits your needs.
