Menú con CSS

Gracias a Dynamic Drive podemos crear menúes muy vistosos y elegantes con solo CSS. Sin duda alguna este tipo de formas es de las más fáciles y personalizables que existen, a mi me fascina.

(1) Tenemos que descargarnos estas dos imágenes y subirlas a nuestro alojamiento:

(2) Agregamos el estilo CSS a nuestra plantilla, como siempre antes de ]]></b:skin> agregamos este trozo de código:

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.solidblockmenu{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
overflow: hidden;
margin-bottom: 1em;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(media/blockdefault.gif) center center repeat-x;
}

.solidblockmenu li{
display: inline;
}

.solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}

.solidblockmenu li a:visited{
color: white;
}

.solidblockmenu li a:hover, .solidblockmenu li .current{
color: white;
background: transparent url(media/blockactive.gif) center center repeat-x;
}

(3) Lo último que nos quedaría sería abrir un nuevo Elemento HTML con el código correspondiente, contenido del menú:

<ul class="solidblockmenu">
<li><a href="http://atasca2.blogspot.com/">Inicio</a></li>
<li><a href="http://atasca2.blogspot.com/search/label/CSS" class="current">Ejemplos CSS</a></li>
<li><a href="mailto:castro.1918@gmail.com">Contacto</a></li>
</ul>
<br style="clear: left" />

<p class="iepara">Paragraph that follows...</p>

Recuerda cambiar los datos del menú por los tuyos. En el ejemplo solo he puesto tres elecciones, puede agregar el trozo <li><a href="http://URL" class="current">Título</a></li> dependiendo la cantidad que quieras usar.

Suerte!.