Cómo hacer un menú horizontal con CSS

2 - , , , - 09/01/2006 00:00:00

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:
#menuhoriz ul li {
      display: inline;
} 
HTML:
<div id="menuhoriz">
<ul>
        <li>Botón uno</li>
        <li>Botón dos</li>
        <li>Botón tres</li>
</ul>
</div>

A partir de aquí podemos ir introduciendo detalles para hacer más atractivo nuestro menú. Una sencilla muestra:

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

Comentarios

Yurifull09/05/2012 20:11:21

1
muy buen aporte... justo lo que buscaba.... (Y)

CRISTIAN13/05/2012 15:39:08

2
oye me puedes hacer un favor??

es que quiero colocarle un menú horizontal ami pagina web y no me da

pero el menú horizontal lo quiero con con código html en ice blue Y POR FAVOR ME ACLARAS DONDE HAY QUE PEGARLO...

puede ser un menu horizontal sencillo
ojala me puedas ayudar y mucho GRACIAS

MI PAGINA WEB ES :
www.vitrinasdobleaa.es.tl


espero me puedas ayudar
y de nuevo GRACIAS

Deja tu comentario

  • El comentario debe estar relacionado con el contenido de la entrada.
  • Comentarios ofensivos, con spam o con lenguaje inapropiado serán eliminados.

captcha