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
div#navcontainer
{
font-family: arial;
font-weight: bold;
background: #642;
position: absolute;
right: 0px;
margin: 0;
padding: 10px;
border: 0;
}
div#navcontainer ul
{
display: inline;
margin: 0;
padding: 0;
list-style: none;
border: solid 1px #642;
}
div#navcontainer h2
{
border: solid 1px #642;
padding: 4px;
text-align: center;
}
div#navcontainer ul li
{
display: inline;
margin: 0;
}
div#navcontainer ul li a
{
color: #a10;
background: #ffc;
margin: 0;
padding: 2px 5px 2px 5px;
text-decoration: none;
}
div#navcontainer ul li a:hover
{
background: #e8db6f;
border-bottom: solid 9px #ffc;
}
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.