La semana pasada me encontré con una problematica muy particular. Estaba desarrollando una aplicación web (2.0 como nos ha gustado llamar ahora!) y necesitaba mostrar las leyendas de unos iconos que se mostraban en el contenido. Además, quería que se mostrara el ícono junto con su leyenda y un checkbox para poder habilitar que se mostrara el contenido marcado con ese ícono.

El problema radicaba en un requrimiento más: no quería que se mostrara todo el tiempo (ya que una vez se sabe que es cada cosa no es necesario que esté ahí). Para realizar esto, decidí hacer un tipo de Drop Down estolo el tag SELECT.

A continuación muesto la solución que encontré. La principal ventaja a las otras opciones que tenía es que no utiliza JavaScript; es hecha completamente con CSS.

Para hacer se necesita tener 3 bloques: un contenedor padre, uno para el "header" y otro para el contenido (en mi caso, la leyenda de los íconos).

<div class="dropdown">
    <div class="label">Texto descriptivo...</div>
    <div class="drop">
        <!-- Contenido del drop down -->
        <div>Opcion 1...</div>
        <div>Opcion 2</div>
        ...
    </div> 
</div> 

Para habilitar su nuevo Drop Down lo único que deben hacer es agregar los siguientes estos de CSS: (definitivamente, estos deben ser arreglados para que se vean acorde al look & feel de su página)

.dropdown {
 width:100px;
 display:block;
}
.dropdown .label {
 border: solid 1px #d0d0d0;
 padding:3px 10px;
 color:#333333;
 background:#f9f9ff no-repeat 80px 3px;

}
.dropdown .drop {
 position:absolute;
 width:200px;
 border: solid 1px #d0d0d0;
 background-color:#f9f9ff;
 padding:10px;
 display:none; 
}
a.dropdown:hover {
 color:#888888;
 text-decoration:none;

}
a.dropdown:hover .label {
}
a.dropdown:hover .drop{
 display:block;
 cursor:default; 
}