Простое вертикальное раздвижное меню на jQuery

Если кому нужно простое вертикальное меню - ниже код:

<ul id="spisok">
<li><a href="#">Первый пункт списка</a>
        <ul>
            <li><a href="#">первый подпункт</a></li>
            <li><a href="#">второй подпункт</a></li>
            <li><a href="#">третий подпункт</a></li>
            <li><a href="#">четвертый пункт</a></li>
        </ul>
</li>
<li><a href="#">Второй пункт списка</a>
        <ul>
            <li><a href="#">первый подпункт</a></li>
            <li><a href="#">второй подпункт</a></li>
        </ul>
</li>
<li><a href="#">Третий пункт списка</a>
        <ul>
            <li><a href="#">первый подпункт</a></li>
            <li><a href="#">второй подпункт</a></li>
            <li><a href="#">третий подпункт</a></li>
        </ul>
</li>
</ul>

теперь подключаем стили:
#spisok, #spisok ul
{
    list-style-type: none;
    margin: 0;
    padding: 5px 0;
}
#spisok li
{
    padding: 5px 0;
}
#spisok li li
{
    padding: 5px 0 5px 14px;
}
#spisok li li:before
{
    content: '- ';
}



ну и естественно сам код:
$(document).ready(function(){
    $('#spisok > li > ul')
        .hide()
        .click(function(e){
        e.stopPropagation();
});
$('#spisok > li').toggle(function(){
    $(this).find('ul').slideDown();
    }, function(){
        $(this).find('ul').slideUp();
    });
});