Menú desplegable con varios niveles en JQuery

Demo

Sitúate en Febrero y Semana 4.

Horizontal

Enero
Febrero
- Semana 1
- Semana 2
- Semana 3
- Semana 4
  - Lunes
  - Martes
  - Miercoles
- Semana 5
Marzo

Vertical

Enero
Febrero
- Semana 1
- Semana 2
- Semana 3
- Semana 4
  - Lunes
  - Martes
  - Miercoles
- Semana 5
Marzo

Fácil

Todo en un mismo documento.


-   [Lorem.](#)
-   [Repellendus.](#)
    -   [Lorem.](#)
    -   [Voluptate.](#)
    -   [Nesciunt.](#)
-   [Fugiat!](#)
-   [Fuga.](#)
-   [Ea.](#)
    -   [Lorem.](#)
    -   [At.](#)
    -   [Ratione?](#)
    -   [Optio.](#)
        -   [Lorem.](#)
        -   [Voluptas!](#)
        -   [Error?](#)
    -   [Asperiores.](#)

Avanzado: en archivos separados.

Html de ejemplo. Puedes llamarlo index.html


-   [Lorem.](#)
-   [Repellendus.](#)
    -   [Lorem.](#)
    -   [Voluptate.](#)
    -   [Nesciunt.](#)
-   [Fugiat!](#)
-   [Fuga.](#)
-   [Ea.](#)
    -   [Lorem.](#)
    -   [At.](#)
    -   [Ratione?](#)
    -   [Optio.](#)
        -   [Lorem.](#)
        -   [Voluptas!](#)
        -   [Error?](#)
    -   [Asperiores.](#)

El Sass.

sass $anchoCelda: 100px $alturaCelda: 50px $numElementos: 5 $colorNivel1: green $colorNivel2: red $colorNivel3: yellow \#menu width: $anchoCelda \* $numElementos margin: 0 auto >ul>li float: left a display: block width: $anchoCelda height: $alturaCelda background: $colorNivel1 text-align: center line-height: $alturaCelda >ul display: none >li position: relative >a background: $colorNivel2 >ul position: absolute left: $anchoCelda top: 0 display: none a background: $colorNivel3 ul list-style: none margin: 0 padding: 0

O en CSS puro.

css \#menu { width: 500px; margin: 0 auto } \#menu>ul>li { float: left } \#menu>ul>li a { display: block; width: 100px; height: 50px; background: green; text-align: center; line-height: 50px } \#menu>ul>li>ul { display: none } \#menu>ul>li>ul>li { position: relative } \#menu>ul>li>ul>li>a { background: red } \#menu>ul>li>ul>li>ul { position: absolute; left: 100px; top: 0; display: none } \#menu>ul>li>ul>li>ul a { background: \#ff0 } \#menu ul { list-style: none; margin: 0; padding: 0 }

Y por último el JQuery.

javascript $(document).ready(function() { $menu = $('\#menu').find('ul').find('li'); $menu.hover(function() { $(this).children('ul').stop(); $(this).children('ul').slideDown(); }, function() { $(this).children('ul').stop(); $(this).children('ul').slideUp(); }); });