Taming list in Standards-Compliant Mode for IE

Author: Alan Hogan

Comments: Detailed explanation

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
{
width: 12em;
border-right: 1px solid #000;
padding: 0px;
margin-bottom: 1em;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #90bade;
color: #333;
}

#navcontainer ul
{
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}

#navcontainer li
{
border-bottom: 1px solid #90bade;
margin: 0;
}

#navcontainer li a
{
display: block;
padding: 6px .5em 6px .5em;
border-left: .7em solid #1958b7;
border-right: .7em solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 9.6em;
}

#navcontainer li a:hover
{
border-left-color: #1c64d1;
border-right-color: #5ba3e0;
background-color: #2586d7;
color: #fff;
}

#navcontainer li li
{
border-top: 1px solid #90bade;
border-bottom: 0;
margin: 0;
}

#navcontainer li li a
{
padding: 4px .5em 4px 1.3em;
background-color: #5ba3e0;
width: 8.8em;
}

#navcontainer li li li a
{
padding: 3px .5em 3px 1.9em;
background-color: #73b2e8;
width: 8.2em;
}


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.