Edit in JSFiddle

jQuery('ul.toggleList > li a').click(function() {
    jQuery(this).siblings('ul').slideToggle(150);
});
jQuery('ul.toggleList > li ul.sub-menu').hide();

※menu 3-3だけ孫メニューまで入っています。<br>

<ul class="toggleList">
    <li><a href="javascript:void(0);">menu 1</a>
        <ul class="sub-menu">
            <li><a href="javascript:void(0);">menu 1-1</a></li>       
            <li><a href="javascript:void(0);">menu 1-2</a></li>
            <li><a href="javascript:void(0);">menu 1-3</a></li>
        </ul>
    </li>
    <li><a href="javascript:void(0);">menu 3</a>
        <ul class="sub-menu">
            <li><a href="javascript:void(0);">menu 3-1</a></li>       
            <li><a href="javascript:void(0);">menu 3-2</a></li>
            <li><a href="javascript:void(0);">menu 3-3</a></li>
        </ul>
    </li>
    <li><a href="javascript:void(0);">menu 3</a>
        <ul class="sub-menu">
            <li><a href="javascript:void(0);">menu 3-1</a></li>       
            <li><a href="javascript:void(0);">menu 3-2</a></li>
            <li><a href="javascript:void(0);">menu 3-3</a>
                <ul class="sub-menu">
                    <li><a href="javascript:void(0);">menu 3-3a</a></li>
                </ul>    
            </li>
        </ul>
    </li>
</ul>

body {
    margin:10px;
}

ul.toggleList {
    list-style:none;
}

ul.toggleList li {
    font-size:24px;
}

ul.toggleList li ul.sub-menu {
    margin-left:25px;
    list-style:disc;
}

ul.toggleList li ul.sub-menu li {
    font-size:12px;
}