Menu desplegable con css

Las posibilidades que nos ofrece el Css son muchas, ahora se puede realizar un menu desplegable solo con la hoja de estilo.

Estructura del html

Se debe trabajar en listas como se observa en el código inferior. Los enlaces de la sección deben estar dentro de un ítem de la lista en una  etiqueta <ul> en este ejemplo el botón de servicios tiene 3 sub-botones.

Importante:  la primera etiqueta <ul> debe tener un identificador o una clase. En este caso estamos utilizando un identificador de nombre “menu1”.

<ul id=”menu1″>
<li><a href=”index.html”>Inicio</a></li>
<li><a href=”quienes.html”>Quienes Somos</a></li>
<li><a href=”servicio.html”>Servicios</a>
<ul>
<li><a href=”servicio1.html”>Servicios 1</a></li>
<li><a href=”servicio2.html”>Servicios 2</a></li>
<li><a href=”servicio3.html”>Servicios 3</a></li>
</ul>
</li>
<li><a href=”contacto.html”>Contáctenos</a></li>
</ul>

Apariencia del menú

En la imagen se muestra los estilos que se van a utilizar para crear el menú desplegable.

  1.  Insertar el estilo para el identificador “menu1”. Se eliminan los margenes y los guiones.
    #menu1 {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    height: 27px;
    }
  2.  Añadir el estilo #menu1 li que define la posición de cada ítem de la lista y la propiedad para flotar al lado izquierdo. La propiedad position:relative se utiliza para que otros elementos se superpongan sobre este.
    #menu1 li {
    position: relative;
    float: left;
    }
  3. Crear el estilo para los enlaces principales. Es importante darle la propiedad de display:block.
    #menu1 li a {
    padding: 6px;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #666;
    color: #f5f9de;
    text-decoration: none;
    display: block;
    }
    #menu1 li a:hover {
    background-color: #93a613;
    }
  4. Insertar el estilo para la lista que contiene los botones deplegables. Para que la lista no aparezca colocar display:none.  Se utiliza position:absolute; para superponer el contenido de la etiqueta <ul>. Para que el contenido de la etiqueta <ul> este encima de las demás colocar z-index:99999;
    #menu1 ul {
    position: absolute;
    z-index: 99999;
    display: none;
    list-style-type: none;
    list-style: none;
    margin: 0;
    padding: 0;
    width:90px;
    }
  5. Modificar la apariencia de los botones secundarios.
    #menu1 ul li a {
    background-color: #cbdd54;
    border-bottom-width: 1px;
    border-right-style: none;
    border-bottom-style: solid;
    border-bottom-color: #BEC1DA;
    }
    #menu1 ul li a:hover {
    background-color: #93a613;
    }
  6. Visualizar el submenu cuando la etiqueta <li> esta en hover
    #menu1 li:hover > ul{
    display: block;
    }

Apariencia con css3

Para mejorar la apariencia de nuestro menú podemos utilizar otras propiedades como degrade, bordes en las esquinas y sombras.

Añadir en los estilo #menu1, #menu1 li a:hover o #menu1 ul  las siguietnes propiedades según sea el caso:

Para colocar degrade en los botones:

background-color: #111;
background: -moz-linear-gradient(#93a613, #cbdd54);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #cbdd54),color-stop(1, #93a613));
background: -webkit-linear-gradient(#93a613, #cbdd54);
background: -o-linear-gradient(#93a613, #cbdd54);
background: -ms-linear-gradient(#93a613, #cbdd54);
background: linear-gradient(#93a613, #cbdd54);

Para tener esquinas redondeadas:

-moz-border-radius: 10px ;
-webkit-border-radius: 10px;
border-radius: 10px;

Para añadir sombras:

-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;

Importante: Estas propiedades no se visualizan en el navegador IE 6,7 y 8 y en el IE 9 solo acepta bordes y sombra.