Listas desplegables
Podemos construir listas desplegables con solo unas cuantas líneas de CSS y sin JavaScript. Especialmente el selector :checked es muy útil en este caso.
En el HTML
En el HTML construimos una serie de listas anidadas. Primero habrá una lista <ul class="menu">. Todas las listas anidadas dentro llevan la clase "interior". Los elementos <li> que llevan una lista <ul class="interior"> anidada tienen esta estructura:
<li><input type="checkbox" name="list" id="Id"/><label for="Id">Nivel 2</label> <ul class="interior"> . . . . . </ul> </li>
El <input type="checkbox"> tiene asignado un id="Id" ( muy importante ). El atributo for de la etiqueta <label> tiene como valor el mismo "Id".
En el CSS
En el CSS las dos líneas de código que más interesan son:
.interior{ display:none; } /* oculta las listas anidadas */
input:checked ~ ul{display:block;}
La tilde ~ selecciona cada <ul> precedido por un <input type="checkbox"> marcado ( checked ). O sea: al marcar la casilla de verificación la lista anidada cambia de display:none; a display:block; de oculta a visible.
#menu * { list-style:none;}
#menu li{ line-height:180%;}
#menu li a{color:#222; text-decoration:none;}
#menu li a:before{ content:"\025b8"; color:#ddd; margin-right:4px;}
#menu input[name="list"] {
position: absolute;
left: -1000em;
}
#menu label:before{ content:"\025b8"; margin-right:4px;}
#menu input:checked ~ label:before{ content:"\025be";}
#menu .interior{display: none;}
#menu input:checked ~ ul{display:block;}