Cómo hacer un menú horizontal con CSS

27 enero, 2011

Hacer un funcional menú horizontal es más sencillo de lo que parece. Por defecto los elementos de una lista se muestran como bloques (blocks) con lo que cada item del listado ocupará una nueva línea. Simplemente cambiando el modo en que se muestran los items, tendremos una lista horizontal que podrá hacer las veces de menú. CSS:

Primero definimos nuestro menu en la hoja de estilos

Con esto conseguimos que nos muestre todo como una linea, por lo general las listas son verticales y con esto coseguimos que sea horizontal

#menuhorizontal ul li {
 display: inline;
}

Creamos una lista en la página

Después creamos la lista en nuestra página, metemos toda la lista dentro de un div, el div que hemos llamado menuhorizontal

<div id="menuhorizontal">
<ul>
 <li>Botón uno</li>
 <li>Botón dos</li>
 <li>Botón tres</li>
</ul>
</div>

Aplicamos estilos a la lista

Ahora podemos aplicar estilos a la lista como el tipo de fuente, color, margenes, … , todo lo que quieras

#menuhorizontal ul li {
         display: inline;
         padding: 2px 7px; /*Separar el texto*/
         margin:5px; /* Separar los botones */
         background-color:#E4E4E4; /* Color de fondo */
 }
 #menuhorizontal ul li:hover {
         background-color:#CCCCCC; /* Color de fondo sobre el boton */
         cursor: pointer; /* cambiar el aspecto del puntero */
}
#menuhorizontal ul {
         /* Linea para delimitar la botonera */
         border-bottom-width: 1px;
         border-bottom-style: solid;
         border-bottom-color: #E4E4E4;
}