Sharp II

Author: Allen Day

Comments: "Only one image was used in this, a simple white angle used to give the box an edged look -- allowing you to make the 'button' any color via the stylesheet. Of course, to place it on a non-white background the image would have to be colored to match".

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
/* DEFAULTS */
ul#navlist li a,ul#subnavlist li a
{
font-family: arial;
font-size: 12px;
font-weight: 900;
text-decoration: none;
}

div#navcontainer
{
width: 200px;
background: #fff;
padding: 2em;
}

/* NAV LIST */
ul#navlist
{
list-style-type: none;
margin: 0;
padding: 0;
}

ul#navlist li { display: inline; }

ul#navlist li a
{
color: #fff;
display: block;
background: #888 url(images/cnr.png) top left no-repeat;
padding: 2px 0 2px 30px;
border-top: solid 1px #fff;
width: 140px;
}

ul#navlist li a:hover { background: #f80 url(images/cnr.png) top left no-repeat; }

ul#navlist li a#current
{
color: #fff;
background: #aae url(images/cnr.png) top left no-repeat;
}

/* SUB NAV LIST */
ul#subnavlist
{
margin: 0 0 0 13px;
list-style-type: none;
padding: 0;
}

ul#subnavlist li { display: inline; }

ul#subnavlist li a
{
display: block;
color: #666;
background: #ccc;
padding: 2px 0 2px 30px;
border-top: solid 1px #fff;
height: auto;
width: 127px;
}

ul#subnavlist li a:hover { background: #aae url(images/cnr.png) top left no-repeat; }

ul#navlist li a#subcurrent
{
color: #999;
background: #ddd;
}

ul#navlist li a#suvcurrent:hover { background: #ddd; }


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.