Menú desplegable con varios niveles en JQuery

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

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

 $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 

 \#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
} 

 $(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(); }); });