This is my submission for List-a-matic 'Nested Emrys'.

listamatic2

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;
}

#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;
        width: 114px;
}

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

#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;
        width: 106px;
}

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


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

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