Menú horizontal simple con CSS (2)

Hace unos meses os mostrábamos algunos menús que podíais agregar a vuestro blog de manera fácil y rápida: Menú Horizontal Simple y Menú vertical Simple.
Pues bien, hoy os volvemos a presentar un nuevo menú de navegación horizontal, un poquitín más complejo, pero muy sencillo de implementar.
Puedes ver un ejemplo en funcionamiento de éste menú aquí.

Para agregarlo solo debes seguir los siguientes pasos:

1. Añadimos un nuevo Elemento HTML encima de la zona de entradas y en él ponemos el siguiente código:

<div id="menuhorizontal">
<ul id="menuh">
   <li><a href="#">Inicio</a></li>
   <li><a href="#">Acerca De</a></li>
   <li><a href="#">Enlazar</a></li>
   <li><a href="#">Contacto</a></li>
   <li><a href="#">Aviso Legal</a></li>
</ul>
</div>
<style type="text/css">
#menuh {
    background: #333;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 50%;
}
#menuh li {
    float: left;
    font: 67.5% "Lucida Sans Unicode", "Trebuchet MS", Arial, Verdana;
    margin: 0;
    padding: 0;
}
#menuh a {
    background: #333 url(http://i825.photobucket.com/albums/zz180/latrucoteca/seperator.gif) bottom right no-repeat;
    color: #ccc;
    display: block;
    float: left;
    margin: 0;
    padding: 8px 12px;
    text-decoration: none;
    font-weight:normal;
}
#menuh a:hover {
    background: #2580a2 url(http://i825.photobucket.com/albums/zz180/latrucoteca/hover.gif) bottom center no-repeat;
    color: #fff;
    padding-bottom: 8px;
    }
</style>

2. Guardamos el Gadget y modificamos la siguiente parte, cambiando la almohadilla (#) por la url del enlace, y la parte en Rojo, por el texto que deseamos que aparezca en el menú:

   <li><a href="#">Inicio</a></li>
   <li><a href="#">Acerca De</a></li>
   <li><a href="#">Enlazar</a></li>
   <li><a href="#">Contacto</a></li>
   <li><a href="#">Aviso Legal</a></li>

3. También podemos agregar más botones al menú adjuntando una nueva línea de código después de las ya presentes:

<li><a href="#">Otro título más</a></li>

En caso de querer realizar esta última acción, es recomendable sustituir la cifra coloreada de verde (50%) por un número mayor.
Y de esta forma ya dispondremos de un elegante y vistoso menú en nuestro blog para mejorar así un poco su aspecto :)
Saludos!