Simpliest vertical collapsible menu ever

by Harsh Bhatnagar

HTML

<ul>
    <li>level 2
        <ul>
            <li>a</li>
            <li>b</li>
        </ul>
    </li>
    <li>level 2
        <ul>
            <li>level 3
                <ul>
                    <li>c</li>
                    <li>d</li>
                </ul>
            </li>
            <li>e</li>
            <li>f</li>
        </ul>
    </li>
</ul>

CSS

ul {
    margin: 3px;
    border: 1px solid red;
}

ul ul {
    display: none;
}

ul li:hover>ul {
    /*display:block;   */
}

JavaScript

$('li').click(function(ev) {
    $(this).find('>ul').slideToggle();
    ev.stopPropagation();
});