Author: Rick Dyer
Comments: This is a variation on Centred list navbar so it is assumed it works in most of the required browsers. The only caveate is that css validation fails the negative margin-left value I have used to close up the space to the left of the list item that shows on hover. Despite this validation failure it works OK in IE6, Netscape 7 and FireFox.
Update: A solution can be found at Andrea Lazzarotto's centered list (Italian).
Browser support chart
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
{
background-color: #1F00CA;
border-top: solid 1px #FFFFFF;
border-bottom: solid 1px #FFFFFF;
}
div#navcontainer ul
{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: white;
text-align: center;
margin: 0;
padding-bottom: 5px;
padding-top: 5px;
}
div#navcontainer ul li
{
display: inline;
margin-left: -4px;
}
div#navcontainer ul li a
{
padding: 5px 10px 5px 10px;
color: white;
text-decoration: none;
border-right: 1px solid #fff;
}
div#navcontainer ul li a:hover
{
background-color: #16008D;
color: white;
}
#active a { border-left: 1px solid #fff; }
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.