Borders and Indents

Author: Brian

"Simple menu using borders and indents for some style".

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
{
/* container div set-up */
border: 1px solid black;
background: #bdb76b;
width: 180px;
padding: 10px;
font-size: 16px;
/* Set font-size so theres no default */
line-height: 22px;
/* Set line-height because I think it looks better like this ;^) */
letter-spacing: .075em;
/* Set letter-spacing so text don't jump as much when it turns bold on hover */
}

#navcontainer a
{
/* Set text-decoration and color so there is no default */
text-decoration: none;
color: #000000;
}

#navcontainer a:hover
{
font-weight: bold;
letter-spacing: 0;
/* Set letter-spacing back to 0 so text don't jump as much when it turns to bold on hover (Still jumps some though) */
}

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

#navcontainer ul ul
{
padding-left: 15px;
/* offset sub menu */
}

#navcontainer ul li
{
padding-left: 5px;
margin-left: 2px;
/* Set margin-left to set-up the left border */
}

#navcontainer ul li#active
{
margin-left: 0px;
/* Set margin back half of left-border width (5px) */
}

#navcontainer ul ul li#subactive
{
margin-left: 0px;
/* Set margin back half the 30px padding above */
border-left: 5px solid black;
}

#navcontainer li { border-left: 1px solid black; }
#navcontainer li#active { border-left: 5px solid black; }

#current
{
font-weight: bold;
letter-spacing: 0;
border-bottom: 1px dashed black;
}

#subcurrent
{
font-weight: bold;
letter-spacing: 0;
border-bottom: 1px dashed black;
}


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.