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
#navcontainer
{
padding: 0;
background: #ccc;
height: 20px;
}
#navlist
{
margin: 0px;
padding: 0px 0px;
display: block;
}
#navlist li
{
list-style: none;
float: left;
}
#navcontainer a, #navlist li.extend
{
margin: 0px;
display: block;
border-top: 1px solid #333;
padding: 1px 6px;
text-decoration: none;
background: #ccc;
font: normal 12px verdana, serif;
color: #000;
}
#navcontainer a:hover, #navcontainer a#current
{
padding: 1px 5px;
background: #FAFAFA;
border-right: 1px solid #333;
border-left: 1px solid #333;
border-top: 1px solid #FAFAFA;
border-bottom: 1px solid #333;
color: #000;
}
#navcontainer a#current
{
background: #F6F6F6;
border-top: 1px solid #F6F6F6;
font-weight: bold;
}
#navcontainer li#active
{
border-right: 2px solid #828282;
border-bottom: 2px solid #828282;
}
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.