Author: Ben Pierce
Comments: This job would be easy if all browsers used the same rules. This one works in IE 6, Netscape 7.2, Moz, Opera, etc. I couldn't tell without putting it online, but the active key may stick on item 1 in IE.
I noticed that a lot of lists didn't bother to make active and hover work on Item 1, but I wanted to give it a go.
Using CSS line-height rather than padding around the links makes the vertical (height) work on the navcontainer. Otherwise, it's a train wreck, especially on IE.
Thanks to Claire (Suzy) and Terence Ordana lists for unspoken direction.
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
#navcontainer
{
margin: 0;
padding: 5px 0 7px 5px;
width: 50%;
line-height: 1.75;
background-color: #669;
font-family: Arial, Helvetica, sans-serif;
font-size: 90%;
}
ul#navlist
{
display: inline;
list-style: none;
}
ul#navlist li
{
float: left;
width: auto;
margin-right: 5px;
border: 2px solid #fff;
background-color: #ddd;
}
ul#navlist li a
{
padding: 0 10px;
line-height: 1.75;
text-decoration: none;
color: #03C;
}
ul#navlist li a#current
{
background-color: #669;
color: #fff;
}
ul#navlist li a:hover, ul#navlist a#current:hover
{
background-color: #777;
color: #fff;
}
ul#navlist li a:active, ul#navlist li#active a#current:active
{
background-color: #f63;
color: #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.