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
#navcontainer
{
padding: 10px;
line-height: 17px;
list-style: none;
background-color: #920;
width: 150px;
}
#navlist
{
margin: 0;
padding: 2px;
padding-left: 0;
border-left: 2px solid #600;
}
#navlist li
{
margin: -1px 0 0 2px;
border-left: 2px solid #600;
padding: 0;
display: block;
list-style-type: none;
}
#navlist a:link, #navlist a:visited
{
font-size: 11px;
font-weight: 100;
line-height: 16px;
padding-left: 2px;
text-decoration: none;
color: #000;
font-family: verdana, arial, helvetica, sans-serif;
}
#navlist a:link#current, #navlist a:visited#current
{
margin-left: -4px;
border-left: 4px solid #810;
border-bottom: 1px dotted #600;
}
#navlist a:link#current:hover, #navlist a:visited#current:hover, #navlist a:hover
{
margin-left: -4px;
border-left: 4px solid #600;
border-bottom: 1px dotted #000;
font-weight: 900;
background-color: #810;
}
ul ul
{
padding: 0;
border-left: 15px solid #810;
margin-left: -6px;
}
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.