Author: Dan Rubin
Comments: This is the simple list navigation I've used on SB for a while now (in the original Green; right now the site is still in "winter" mode). The new version of SB, due within the next month or two, will feature my take on CSS tabs (though it might be a little too complex for your markup sample) -- I'll take a stab at submitting that around the time the redesign launches.
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 { /* none needed */ }
ul#navlist
{
margin: 0;
padding: 0;
list-style-type: none;
white-space: nowrap;
}
ul#navlist li
{
float: left;
font-family: verdana, arial, sans-serif;
font-size: 9px;
font-weight: bold;
margin: 0;
padding: 5px 0 4px 0;
background-color: #eef4f1;
border-top: 1px solid #e0ede9;
border-bottom: 1px solid #e0ede9;
}
#navlist a, #navlist a:link
{
margin: 0;
padding: 5px 9px 4px 9px;
color: #95bbae;
border-right: 1px dashed #d1e3db;
text-decoration: none;
}
ul#navlist li#active
{
color: #95bbae;
background-color: #deebe5;
}
#navlist a:hover
{
color: #74a893;
background-color: #d1e3db;
}
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.