Menú desplegable con CSS

Este es el modelo de un menú desplegable que sólo requiere CSS y fue publicado por aex.net. Allí, podemos descargar los archivos necesarios para reproducir el demo online.

Con muy pocas modificaciones, podemos adaptarlo a cualquier página; por ejemplo, en este caso, le he quitado la parte de las transparencias para que sea más visible:

• Enlace Simple
• Mis Enlaces 
  • Submeú 1
  • Submeú 2
  • Submeú 3
  • Submeú 4
  • Submeú 5
• Otros enlaces 
  • Submeú 6
  • Submeú 7
  • Submeú 8

Como en la mayoría de los casos, hay dos partes; el HTML es muy simple y se basa en una serie de listas donde, los items con la clase drop son desplegables:

<ul class="menu">

  <!-- este es un item simple -->
  <li><a href="URL_enlace">ITEM SIMPLE</a></li>

  <!-- así, construimos un item desplegable -->
  <li class="drop">
    <a href="#">ITEM DESPLEGABLE</a>

      <!-- este es el ícono que puede ser cualquiera -->
      <span class="toggle">&nbsp;</span>
       
      <!-- el submenú que se despliega -->
      <ul>
        <li><a href="URL_enlace1">TEXTO ENLACE 1</a></li>
        <li><a href="URL_enlace2">TEXTO ENLACE 2</a></li>
        <li><a href="URL_enlace3">TEXTO ENLACE 3</a></li>
      </ul>
  </li>

</ul>

EL CSS tampoco es complicado aunque es un poco engorroso y es la clave de todo:

ul.menu { /* es la lista principal */
  background-color: #A9A9A9;
  float: left;
  list-style-type: none;
  margin: 0;
  padding: 0 20px;
}

ul.menu li { /* cada item de la lista principal */
  border: 2px solid #A9A9A9;
  display: block;
  float: left;
  height: 30px;
  margin: 0;
  padding: 0;
  position: relative;
}
ul.menu li:hover { /* efecto hover sobre los items de la lista principal */
  -moz-border-radius: 4px;
  background-color: #000;
  border:2px solid  #A9A9A9;
}
ul.menu li a { /* cada item de la lista principal es un enlace */
  color: #FFF;
  display: block;
  float: left;
  font-weight: bold;
  line-height: 18px;
  padding: 6px 15px 5px;
  text-decoration: none;
}

/* el ícono para desplegar el menú */
ul.menu li a span {
  font-weight: normal;
  padding-left: 3px;
}
ul.menu li.drop a {
  padding-right: 7px;
}
ul.menu li.drop:hover li {
  border: none;
}
ul.menu li.drop span.toggle {
  background: transparent url(URL_toggle.png) no-repeat scroll 0 -20px;
  display: block;
  float: left;
  height: 26px;
  margin: 0 5px;
  padding: 0;
  width: 20px;
}

/* los efectos al pasar el ratón que desplegarán el submenú */
ul.menu li.drop:hover {
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-topleft: 4px;
  -moz-border-radius-topright: 4px;
}
ul.menu li.drop:hover ul {
  display: block;
  padding: 0 0 10px 0;
  z-index: 1;
}

ul.menu li ul { /* la lista con el submenú */
  background-color: #555;
 display: none;
  left: 0;
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 30px;
  width: 100%;
}
ul.menu li ul li { /* cada item del submenú */
  border: none;
  float: none;
  height: auto;
  margin: 0;
  padding: 0;
}
ul.menu li ul li a { /* cada item del submenú es un enlace */
  background-color: transparent;
  color: #DDD !important;
  display: block;
  float: none;
  font-size: 13px;
  font-weight: normal;
  height: auto;
  margin: 0;
  padding: 5px 15px;
}

/* efectos sobre los items del submenú */
ul.menu li:hover ul {
  -moz-border-radius-bottomleft: 4px;
  -moz-border-radius-bottomright: 4px;
  border: none;
  background-color: #555;
}
ul.menu li:hover ul * {
  -moz-border-radius: 0;
  background-color: transparent;
}
ul.menu li ul li:hover {
  background-color: #000;
}