Simple menu con CSS

Un sencillo menú construido mediante CSS y usando solo una imagen.


[1] Colocamos las líneas de CSS dentro de nuestra plantilla antes de ]]></b:skin>:

#nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
}

#nav-menu li
{
float: left;
margin: 0 0.15em;
}

#nav-menu li a
{
background: url(http://img410.imageshack.us/img410/9401/cssnavbm2.gif) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 6em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}

/* Hide from IE5-Mac \*/
#nav-menu li a
{
float: none
}
/* End hide */

#nav-menu
{
width:30em
}

[2] Añadimos el código necesario para construir los enlaces del menú en un elemento HTML de la plantilla y lo arrastramos sobre las entradas o debajo de la cabecera:

<div id="nav-menu">
<ul>
<li><a href="http://elescaparatederosa.blogspot.com">Inicio</a></li>
<li><a href="mailto:lejaniaimposible@hotmail.com">Contacto</a></li>
<li><a href="http://blogger.com">Blogger</a></li>
</ul>
</div>

[3] En este último código es donde tenéis que colocar vuestros propios datos para construir los enlaces.
En el ejemplo hay solo tres botones, pero pueden añadirse más, duplicando las líneas del código y añadiendo los datos del enlace:

<li><a href="Url_del_enlace">Enlace</a></li>