Simple menú desplegable con CSS

Este es un ejemplo sencillo para crear un menú desplegable que puede incluir submenús, que usa las posibilidades que nos brindan las nuevas propiedades del CSS3.

Como casi cualquier otro, el HTML se arma en una lista, utilizando etiquetas UL y LI que, se anidan si es que queremos crear un submenú. Esta sería una lista standard:

<ul class="mi-menu">
  <li><a href="URL_enlace_1"> texto_enlace_1 </a></li>
  <li><a href="URL_enlace_2"> texto_enlace_2 </a></li>
  <li><a href="URL_enlace_3"> texto_enlace_3 </a></li>
</ul>

y si quisiéramos que uno de esos enlaces fuera un submenú:

<ul class="mi-menu">
  <li><a href="URL_enlace_1"> texto_enlace_1 </a></li>
  <li>
    <a href="#"> texto_enlace_2 </a>
    <ul>
      <li><a href="URL_enlace_2.1"> texto_submenú_2.1 </a></li>
      <li><a href="URL_enlace_2.2"> texto_submenú_2.2 </a></li>
      <li><a href="URL_enlace_2.3"> texto_submenú_2.3 </a></li>
    </ul>
  </li>
  <li><a href="URL_enlace_3"> texto_enlace_3 </a></li>
</ul>

Así como está, veríamos algo similar a esto:

• texto_enlace_1
• texto_enlace_2
  • texto_submenú_2.1
  • texto_submenú_2.2
  • texto_submenú_2.3
• texto_enlace_3

Y ahora, el CSS que hará que esa lista se transforme en otra cosa:

• inicio
• un item
• un submenú
  • submenú 1
  • submenú 2
  • submenú 3
• otro item
• otro
• último

<style type="text/css">
  /* el menú en si mismo */
  .mi-menu  {
    border-radius: 5px;
    list-style-type: none;
    margin: 0 auto; /* si queremos centrarlo */
    padding: 0;
    /* la altura y su ancho dependerán de los textos */
    height: 40px; 
    width: 510px;
    /* el color de fondo */
    background: #555;
    background: -moz-linear-gradient(#555,#222);
    background: -webkit-linear-gradient(#555,#222);
    background: -o-linear-gradient(#555,#222);
    background: -ms-linear-gradient(#555,#222);
    background: linear-gradient(#555,#222);
  }

  /* si es necesario, evitamos que Blogger de problemas con los saltos de línea cuando escribimos el HTML */
  .mi-menu  br { display:none; }

  /* cada item del menu */
  .mi-menu  li {
    display: block;
    float: left; /* la lista se ve horizontal */
    height: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }
  .mi-menu li a {
    border-left: 1px solid #000;
    border-right: 1px solid #666;
    color: #EEE;
    display: block;
    font-family: Tahoma;
    font-size: 13px;
    font-weight: bold;
    line-height: 28px;
    padding: 0 14px;
    margin: 6px 0;
    text-decoration: none;
    /* animamos el cambio de color de los textos */
    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
  }
  /* eliminamos los bordes del primer y el último */
  .mi-menu li:first-child a { border-left: none; }
  .mi-menu li:last-child a{ border-right: none; }
  /* efecto hover cambia el color */
  .mi-menu li:hover > a { color: Crimson; }

  /* los submenús */
  .mi-menu ul {
    border-radius: 0 0 5px 5px;
    left: 0;
    margin: 0;
    opacity: 0; /* no son visibles */
    position: absolute;
    top: 40px; /* se ubican debajo del enlace principal */
    /* el color de fondo */
    background: #222;
    background: -moz-linear-gradient(#222,#555);
    background: -webkit-linear-gradient(#22,#555);
    background: -o-linear-gradient(#222,#555);
    background: -ms-linear-gradient(#222,#555);
    background: linear-gradient(#222,#555);
    /* animamos su visibildiad */
    -moz-transition: opacity .25s ease .1s;
    -webkit-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
  }
  /* son visibes al poner el cursor encima */
  .mi-menu li:hover > ul { opacity: 1; }

   /* cada un ode los items de los submenús */
  .mi-menu ul li {
    height: 0; /* no son visibles */
    overflow: hidden;
    padding: 0;
    /* animamos su visibildiad */
    -moz-transition: height .25s ease .1s;
    -webkit-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
  }
  .mi-menu li:hover > ul li {
    height: 36px; /* los mostramos */
    overflow: visible;
    padding: 0;
  }
  .mi-menu ul li a {
    border: none;
    border-bottom: 1px solid #111;
    margin: 0;
    /* el ancho dependerá de los textos a utilizar */
    padding: 5px 20px;
    width: 100px;
  }
  /* el último n otiene un borde */
  .mi-menu ul li:last-child a { border: none; }

</style>

REFERENCIAS:designmodo.com