Nested emrys

Author: Ben Van't Ende

Comments: Different colors and indent for the sublevel. I used SMBH on http://css-discuss.incutio.com/?page=BoxModelHack to get it cross-browser. Still wondering what hack is most reliable.

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
{
/*avoid gap after li in ie6 by setting width*/
width: 130px;
font-size: 11px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
margin-left: 30px;
}

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

#navlist a
{
display: block;
color: #8592BB;
padding: 1px 0 1px 8px;
}

/*boxmodel hack. http://css-discuss.incutio.com/?page=BoxModelHack SBMH*/
#navlist a { width: 114px; }

#navlist a
{
\width: 130px;
w\idth: 114px;
}

#subnavlist a
{
display: block;
color: #9C9C9C;
padding: 1px 0 1px 8px;
margin-left: 8px;
}

/*boxmodel hack. http://css-discuss.incutio.com/?page=BoxModelHack SBMH*/
#subnavlist a { width: 106px; }

#subnavlist a
{
\width: 122px;
w\idth: 106px;
}

#navlist a, #navlist a:visited,#subnavlist a, #subnavlist a:visited
{
border-left: 8px solid #FFFFFF;
background: #FFFFFF;
color: #9C9C9C;
text-decoration: none;
}

#navlist a:hover, #navlist a#current:hover
{
border-left: 8px solid #CCCCCC;
text-decoration: underline;
}

#subnavlist a:hover, #subnavlist a#subcurrent:hover
{
border-left: 8px solid #CCCCCC;
text-decoration: underline;
}

a#current, a:visited#current, a#subcurrent , a:visited#subcurrent
{
border-left: 8px solid #283D82;
background: #F3F5FC;
color: #283D82;
text-decoration: none;
}


ABOUT THE CODE
Before using these lists, please check the authors site for the original CSS code. If you intend to use the code without any modification, consult the author first.