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