Menú deplegable

Para tener información de cada parte del menú, haz "clic" en el

Parte 1:

Este paso corresponde al listado que aparecerá siempre visible. En primer lugar damos un ancho a la caja que contiene las listas. A continuación, a todos los "li" del primer listado, les proporcionamos una posición relativa para posteriormente posicionar los segundos listados. Dispondremos el listado en bloque y finalmente, solo a estos "li", los flotamos a la izquierda. De este modo nuestro primer listado aparecerá en bloque de forma horizontal.

Parte 2:

En este segundo paso posicionaremos el segundo listado. Primeramente les damos un posicionamiento absoluto. De este modo, como los elementos "li" del listado anterior están en posicionamiento relativo, nos permite posicionarlos a partir de ellos, asi este listado queda situado justo debajo del primero y de forma vertical. Pero este listado solo debe ser visible al pasar el ratón por encima del primer listado. Para ello, en un estado normal hacemos el segundo listado invisible al usuario (display: none;) y cuando pase el ratón por encima del primer listado, lo dispondremos en bloque (display: block).

Parte 3:

Finalmente en este tercer paso posicionaremos el resto de listados. Pondremos al tercer listado un posicionamiento relativo y lo moveremos a la derecha los píxeles necesarios para que, en el momento en el que el usuario pase el ratón por encima del segundo listado, aparezca por el lado derecho este tercer listado.