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
{
width: 100%;
float: left;
background-color: #426208;
}
#navcontainer ul { padding: 0; }
#navcontainer ul li { display: inline; }
#navcontainer ul
{
margin: 0;
padding: 0 0 0 7%;
color: #FFFFFF;
font-family: tahoma, verdana, geneva, arial, helvetica, sans-serif;
font-size: .65em;
letter-spacing: 2px;
font-weight: bold;
}
#navcontainer ul li a
{
padding: 0.2em 12px;
background-color: #426208;
color: #FFFFFF;
text-decoration: none;
float: left;
border-right: 1px solid #94B473;
}
#navcontainer ul li a:hover
{
background-color: #7B9D25;
color: #FFFFFF;
}
#navlist li a:hover, #navlist li a:active
{
color: #FFFFFF;
text-decoration: none;
background: #CC3333;
text-align: left;
text-transform: uppercase;
font: bold normal 10px/16px "Lucida Sans Unicode", verdana, lucida, arial, helvetica, sans-serif;
}
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.