Menú acordeón CSS desplegable con hover o con clic

Los menús del tipo "acordeón" son aquellos cuyos elementos se disponen -normalmente- en vertical y cuyas correspondientes opciones se despliegan y quedan visibles al seleccionar el elemento principal que los engloba.

Son especialmente útiles para barras laterales aunque el efecto para ciertos diseños a veces no es el óptimo. Hay que valorar por tanto su conveniencia o no de usarlos, teniendo en cuenta que el menú plegado ocupa evidentemente menos altura que cuando está desplegado y por tanto, cuando se hacen visibles las opciones secundarias todos los elementos (otros gadgets, por ejemplo) que pudiera haber debajo de él, se desplazarán hacia abajo tanto como el menú se despliegue.

Dicho esto lo que veremos será un esquema básico de cómo construirlos sin necesidad de JavaScript (eso otro ya vimos cómo hacerlo), para que reaccionen tanto cuando se pase el puntero por encima (hover) como cuando se haga clic sobre ellos.
Son especialmente útiles para barras laterales aunque el efecto para ciertos diseños a veces no es el óptimo. Hay que valorar por tanto su conveniencia o no de usarlos, teniendo en cuenta que el menú plegado ocupa evidentemente menos altura que cuando está desplegado y por tanto, cuando se hacen visibles las opciones secundarias todos los elementos (otros gadgets, por ejemplo) que pudiera haber debajo de él, se desplazarán hacia abajo tanto como el menú se despliegue.