Multi-level sliding menu

example from "JQuery Novice to Ninja page 138)

by beej

HTML

<ul id="menu">
 <li><a href="#">What's new?</a>
     <ul class="active">
         <li><a href="#">Weekly specials</a></li>
         <li><a href="#">Last night's pics!</a></li>
         <li><a href="#">Users' comments</a></li>
     </ul>
 </li>
 <li><a href="#">Member extras</a>
     <ul>
         <li><a href="#">Premium Celebrities</a></li>
         <li><a href="#">24-hour Surveillance</a></li>
     </ul>
    </li>
</ul>

CSS

#menu, #menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#menu li { 
    cursor: pointer;
    background: #94C5EB;
    border-bottom: 1px solid #444;
}

#menu li a { text-decoration: none; }

#menu > li > a { 
    padding: 2px 10px; 
    font-weight: bold;
}


#menu li li { 
 cursor: auto;
 border: 0;
 padding: 0 14px;
 background-color: #fff;
}

JavaScript

$('#menu > li > ul').hide().click(function(e) {
    e.stopPropagation();
});
$('#menu > li').toggle(function() {
    $(this).find('ul').slideDown();
}, function() {
    $(this).find('ul').slideUp();
});

$('#menu > li').hover(function() {
    $(this).addClass('waiting');
    setTimeout(function() {
        $('#menu .waiting').click().removeClass('waiting');
    }, 600);
}, function() {
    $('#menu .waiting').removeClass('waiting');
});