Blue's clues

Author: Mark Lynch

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
#navcontainer { }
#navcontainer a { text-decoration: none; }

#navcontainer ul
{
padding: 0;
margin: 0;
list-style-type: none;
position: relative;
}

#navcontainer li { display: inline; }

/*1st level elements*/
#navcontainer ul
{
border-top: 1px solid #36c;
border-bottom: 1px solid #36c;
background-color: #36c;
padding: 2px 0;
margin-bottom: 2em;
}

#navcontainer li { margin: 0 0 0px; }

#navcontainer ul a,
#navcontainer ul a:link,
#navcontainer ul a:visited
{
background-color: #36c;
border: 1px solid #36c;
color: white;
padding: 0px 5px;
}

#navcontainer ul a:hover,
#navcontainer ul a:focus
{
background-color: #9CD4F7;
border: 1px solid black;
color: black;
}

/*current Link*/
#navcontainer ul a#current,
#navcontainer ul a#current:link,
#navcontainer ul a#current:visited { font-weight: bold; }

/*Second and subsequent levels*/
#navcontainer ul ul
{
font-size: 80%;
position: absolute;
top: 23px;
left: 0;
width: 100%;
border-top: none;
background-color: #95B1BB;
}

#navcontainer ul ul li { display: inline; }

#navcontainer ul ul a,
#navcontainer ul ul a:link,
#navcontainer ul ul a:visited
{
background-color: #95B1BB;
border: 1px solid #95b1bb;
color: black;
}

#navcontainer ul ul a:hover,
#navcontainer ul ul a:focus
{
background-color: #9CD4F7;
border: 1px solid black;
color: black;
}

/*current Link*/
#navcontainer ul ul a#subcurrent,
#navcontainer ul ul a#subcurrent:link,
#navcontainer ul ul a#subcurrent:visited { font-weight: bold; }


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.