Menú vertical con imagen de fondo

Seguimos con ésta lluvia de menús. Ya voy a poner otras utilidades, pero me parece que, a la hora de expandir nuestro blog, siempre está bueno que tengamos a mano este tipo de cosas.
En este caso, como muestra, te puse mis etiquetas para que veas que también sirve para usarlas en ellas.
El primer código lo ubicas arriba de ]]></b:skin> y el segundo, donde te parezca, desde añadir un elementos de página. También lo podes poner en una entrada como te lo muestro aca abajo.

Mira:

• Accesorios
• Plantillas
• Trucos
• Script
• Menús

Todo tuyo:

Este va antes de ]]></b:skin> en tu plantilla

Código 1 [+/-]

/* Menu nav
----------------------------------------------- */

#nav,#nav li {
margin: 0;
padding: 0;
list-style: none;
}

#nav a {
width: 140px;
height: 27px;
background: url(http://blogdecesar.googlepages.com/menunav.gif) no-repeat;
color: #666;
display: block;
font: bold 12px/22px Arial, sans-serif;
text-decoration: none;
text-indent: 14px;
}

#nav a:hover {
background-position: 0 -27px;
color: #900;
text-decoration: none;
}

Vas a ver esto:
background: url(http://blogdecesar.googlepages.com/menunav.gif) no-repeat;
Esta es la imagen de fondo. Si la cambias para adaptarlo a tus colores tene en cuenta el tamaño.

Y desde añadir un elemento de página abrís HTML/Javascript y pegas esto:

<ul id="nav">
<li><a href="#">Título</a></li>
<li><a href="#">Título</a></li>
<li><a href="#">Título</a></li>
<li><a href="#">Título</a></li>
<li><a href="#">Título</a></li>
</ul>

Aca # va el vinculo

Buena suerte!!!