Construir menús usando listas desordenadas

Para todos los ejemplos se ha usado exactamente la misma lista desordenada simple, aplicándole distintas CSS.
No se ha usado javascript ni imágenes para crear estos efectos.

Primer ejemplo: Barra de navegación

CSS

#navbar {
	width: 100%;
	height: 1.2em;
	}
#navbar UL {
	margin: 0;
	padding: 0;
	background: #669;
	border-top: solid 1px #aaa;
	}
#navbar LI {
	border-right: solid 1px #aaa;
	list-style-type: none;
	display: inline;
	}
#navbar A {
	padding: 0 15px;
	text-decoration: none;
	color: #fff;
	background: #669;
	}
#navbar A:hover {
	color: #000;
	background: #fff;
	}

Segundo ejemplo: Panel

CSS

#panel {
	width: 220px;
	padding: 4px;
	background: #89a;
	border: solid 3px #000;
	}
#panel UL {
	background: #99a;
	border: solid #aaa;
	border-width: 0 1px 1px 1px;
	margin: 0;
	padding: 0;
	}
#panel LI {
	list-style-type: none;
	border-top: solid 1px #aaa;
	}
#panel A {
	display: block;
	width: 100%;
	text-align: center;
	text-decoration: none;
	}
#panel A:hover {
	background: #fff;
	}

Tercer ejemplo: Jugando con los bordes

CSS

#borde {
	width: 200px;
	}
#borde UL {
	padding: 0;
	margin: 0;
	border-top: solid 1px #89a;
	}
#borde LI {
	list-style-type: none;
	border-bottom: solid 1px #89a;
	}
#borde A {
	display: block;
	width: 170px;
	text-decoration: none;
	text-align: center;
	border-left: solid 20px #89a;
	border-right: solid 10px #aaa;
	}
#borde A:hover {
	border-left-color: #000;
	border-right-color: #ff6;
	color: #fff;
	background: #090;
	}

Cuarto ejemplo: Cajas

CSS

#cajas {
	width: 100%;
	height: 5em;
	text-align: right;
	background: #000;
	}
#cajas UL {
	margin: 0;
	padding: 0;
	}
#cajas LI {
	list-style type: none;
	display: inline;
	margin-right: 30px;
	}
#cajas LI:hover {
	border-bottom: solid 15px #090;
	}
#cajas A {
	border: solid #090;
	border-width: 0 1px 5px 1px;
	text-decoration: none;
	vertical-align: middle;
	color: #fff;
	padding: 0 15px;
	}
#cajas A:hover {
	color: #000;
	background: #fff;
	}

Notas

El último ejemplo funciona parcialmente en Internet Explorer, ya que no admite hover sobre ningún elemento que no sea A. También hace cosas raras en la ultima versión de Opera, donde el efecto completo sólo se muestra en algunos elementos de la lista.
Los navegadores con motor Gecko, como Mozilla, lo muestran perfectamente.