Blue Boxes

Author: Marc Liddell

Comments: "Uses some :hover to change link border colours".

Browser support chart

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
#navlist
{
padding: 3px;
border: 1px solid #fff;
width: 12em;
background-color: #26a;
font: 12px verdana,sans-serif;
}

#navlist li
{
list-style: none;
border: 1px solid #26a;
}

#navlist a
{
color: #eee;
text-decoration: none;
display: block;
border-left: 1em solid #159;
border-bottom: 1px solid #159;
padding: 4px 8px;
}

#navlist a:hover { border-color: #124; }

#subnavlist li a
{
border: 0;
border-left: 0.8em solid #26a;
padding: 3px 4px;
margin-left: -20px;
}


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.