The Purple List

Author: carsten888

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: 200px; }

#navcontainer ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
width: 100%;
}

#navcontainer li
{
margin: 0px;
padding: 0px;
line-height: 20px;
}

#navcontainer ul li a
{
display: block;
width: 180px;
padding-left: 20px;
background-color: #291268;
font-size: 0.9em;
}

#navcontainer ul li a:link, #navcontainer ul li a:visited
{
color: #E2E2F5;
text-decoration: none;
background-image: url(http://www.lab.onceuponatime.nl/css_stuff/bullet_u.gif);
background-repeat: no-repeat;
background-position: left top;
}

#navcontainer ul li a:hover
{
background-color: #3E228B;
color: #fff;
background-image: url(http://www.lab.onceuponatime.nl/css_stuff/bullet_a.gif);
}

#navcontainer ul ul li a
{
display: block;
padding-left: 40px;
width: 160px;
background-color: #6565AB;
font-size: 0.8em;
}

#navcontainer ul ul li a:link, #navcontainer ul ul li a:visited
{
color: #E2E2F5;
text-decoration: none;
background-image: url(http://www.lab.onceuponatime.nl/css_stuff/subbullet_u.gif);
background-repeat: no-repeat;
background-position: left top;
}

#navcontainer ul ul li a:hover
{
background-color: #7575C1;
color: #E2E2F5;
background-image: url(http://www.lab.onceuponatime.nl/css_stuff/subbullet_a.gif);
}

/* selected states */
#navcontainer ul li a#current
{
font-weight: bold;
color: #6699CC;
background-repeat: no-repeat;
background-position: left top;
background-image: url(http://www.lab.onceuponatime.nl/css_stuff/bullet_a.gif);
background-color: #3E228B;
}

#navcontainer ul ul li a#subcurrent
{
font-weight: bold;
color: #98C8F7;
background-repeat: no-repeat;
background-position: left top;
background-image: url(http://www.lab.onceuponatime.nl/css_stuff/subbullet_a.gif);
background-color: #7575C1;
}


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.