CSS and the Humble List

We are all familiar with standard ordered and unordered lists:

But there is a whole lot more which can be done with them. For example, if you want to replace the regular symbols with an image, you can get much more consistent and controllable results by using a background image than with list-style-image:

CSS:
.navlist {
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}
.navlist li {
	padding-left: 16px;
	background: url(files/redarrow.png) left center no-repeat;
}

HTML:
<ul class="navlist">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
</ul>

But with the exact same HTML, we could also produce these three-dimensional rollover buttons:

.navlist {
	background: #732BB0;
	padding: 2px 4px;
	margin: 0;
	width: 180px;
	font: 12px Verdana, sans-serif;
	}
.navlist li {
	list-style: none;
	margin: 0;
	}
.navlist a {
	display: block;
	color: #FFF;
	text-decoration: none;
	margin: 4px 0;
	background: #CC3399;
	border-width: 1px 1px 1px 8px;
	border-style: solid;
	border-color: #E085C2 #732BB0 #732BB0 #AFCE26;
	padding: 4px 6px 4px 12px;
	/* for IE */
	width: 99%;
	}
html>body .navlist a {
	/* hack for Mozilla browsers */
	width: auto;
	}
.navlist a:active, .navlist a:hover {
	background: #A4297B;
	border-color: #732BB0 #E085C2 #E085C2 #AFCE26;
	}

Another change of CSS, but still the same HTML, and instead of vertical navigation, we have horizontal:

.navlist {
	margin: 0;
	padding: 0;
	font: 12px Verdana, sans-serif;
.	}
.navlist li {
	display: inline;
	list-style: none;
	margin: 0;
	}
.navlist a {
	color: #FFF;
	text-decoration: none;
	margin: 4px 0;
	background: #CC3399;
	border-width: 1px;
	border-style: solid;
	border-color: #E085C2 #732BB0 #732BB0 #E085C2;
	padding: 4px 6px;
	}
.navlist a:active, .navlist a:hover {
	background: #A4297B;
	border-color: #732BB0 #E085C2 #E085C2 #732BB0;
	}

To turn this into a full-width navigation bar, does require a small HTML change, namely, wrapping the list into a div, plus a few more CSS changes:

CSS:
.navlist {
	margin: 0;
	padding: 10px 4px;
	font: 12px Verdana, sans-serif;
	width: 100%;
	background: #732BB0;
	}
.navlist ul {
	margin: 0;
	padding: 0;
	}
.navlist ul li {
	display: inline;
	list-style: none;
	margin: 0;
	}
.navlist ul li a {
	color: #FFF;
	text-decoration: none;
	margin: 4px 0;
	background: #CC3399;
	border-width: 1px;
	border-style: solid;
	border-color: #E085C2 #732BB0 #732BB0 #E085C2;
	padding: 4px 6px;
	}
.navlist ul li a:active, .navlist ul li a:hover {
	background: #A4297B;
	border-color: #732BB0 #E085C2 #E085C2 #732BB0;
	}

HTML:
<div class="navlist">
<ul>
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
</ul>
</div>

All of which, I hope, gives you some idea of the possibilities offered by the humble list. And believe me, this barely scratches the surface. Take a look at Listamatic for literally dozens more variants.