Author: Allen Day
HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a>
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">Subitem one</a></li>
<li><a href="#">Subitem two</a></li>
<li><a href="#">Subitem three</a></li>
<li><a href="#">Subitem four</a></li>
</ul>
</li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
</ul>
</div>
CSS
div#navcontainer
{
font: 10px "verdana",sans-serif;
font-weight: 900;
display: block;
color: #000;
background: #c0c0c0;
width: 12em;
padding: 20px;
margin: 0;
}
ul#navlist,ul#navlist li ul#subnavlist
{
list-style-type: none;
padding: 0;
margin: 0;
}
ul#navlist li,ul#navlist li ul#subnavlist li { display: inline; }
ul#navlist li a
{
display: block;
width: 10em;
color: #000;
background: #ccc;
text-align: center;
text-decoration: none;
border-left: solid #eee;
border-top: solid #eee;
border-right: solid #aaa;
border-bottom: solid #aaa;
border-width: 2px;
margin: 0;
padding: 2px 5px 2px 5px;
}
ul#navlist li a:hover,ul#navlist li a:focus { background: #eee; }
ul#navlist li a:active
{
border-left: solid #aaa;
border-top: solid #aaa;
border-right: solid #eee;
border-bottom: solid #eee;
border-width: 2px;
padding: 2px 5px 2px 5px;
}
ul#navlist li#active a
{
color: #eee;
background: #bbb;
border-left: solid #eee;
border-top: solid #eee;
border-right: solid #aaa;
border-bottom: solid #aaa;
border-width: 2px;
}
ul#navlist li ul#subnavlist li a
{
display: block;
width: 9em;
color: #000;
background: #ccc;
text-align: center;
text-decoration: none;
border-left: solid #aaa;
border-right: solid #aaa;
border-width: 0 1px 0 1px;
margin: 0 0 0 1em;
padding: 3px 6px 3px 6px;
}
ul#navlist li ul#subnavlist li a:hover,ul#navlist li ul#subnavlist li a:focus { background: #eee; }
ul#navlist li#active ul#subnavlist li#subactive a
{
color: #eee;
background: #bbb;
}
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.