Indented list

Author: Russ Weakley

Comments: Borders and LI indents are used to make this list indent.

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 { margin-left: 30px; }

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: verdana, arial, sans-serif;
}

#navcontainer li { margin: 0; }

#navcontainer a
{
display: block;
color: #333;
background-color: transparent;
width: 140px;
padding: 2px 10px;
text-decoration: none;
border-top: 1px solid #aaa;
border-bottom: 1px solid #aaa;
border-left: 1px solid #aaa;
font-size: 12px;
}

#navcontainer a:hover
{
background-color: #ddd;
color: #333;
border-right: 10px solid #aaa;
padding: 2px 1px 2px 10px;
}

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

#navcontainer li li a
{
display: block;
color: #333;
background-color: transparent;
width: 110px;
padding: 2px 10px;
margin: 0;
border-top: none;
border-bottom: none;
border-left: 1px solid #aaa;
text-decoration: none;
font-size: 12px;
}


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.