Simple menú desplegable con CSS (como el de este blog)

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ú

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>