jquery - dropdown nav menu opening inner menus

Question

I cant manage to handle the inner menus only the outer menus opens fine anyone has an idea how to handle it ?

Html:

<nav id="menu-nav">
        <ul>
            <li class="top">
                <a href="#">Reports</a>
                <ul>
                    <li>
                        <a href="#">Credit Balance</a>
                        <ul>
                            <li>Sales</li>
                            <li>Float Credit</li>
                            <li>Consumed Credit</li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Calls</a>
                        <ul>
                            <li>Client Calls</li>
                            <li>Expert Calls</li>
                            <li>Current Calls</li>
                            <li>Errors</li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Users/Experts</a>
                        <ul>
                            <li>Users Report</li>
                            <li>Expertest Report</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="top">
                <a href="#">Support</a>
                <ul>
                    <li>New Tickets</li>
                    <li>Open Tickets</li>
                    <li>Archived Tickets</li>
                </ul>
            </li>
            <li>User Management</li>
            <li>Packages Managments</li>
            <li class="top">
                <a href="#">Application Managments</a>
                <ul>
                    <li>Notification Manager</li>
                    <li>Application Settings</li>
                </ul>
            </li>
        </ul>
    </nav>

jQuery:

$(document).ready(function() {
    $("#menu-nav").click(function(e){
        e.stopPropagation(); // this stops the bubbling from going any higher
    });
    $('body').click(function(){ // this is only reached if the clicks comes outside the #menu-nav
        $("#menu-nav ul ul").slideUp('fast');
    });
    $("#menu-nav ul li.top").click(function() {
        $("#menu-nav ul ul").slideUp("fast", function(){});

        $("ul:first", this).slideDown("fast", function(){
            $("ul", this).slideUp("fast");
        });
    });
});

Answer 1

See this : http://jsfiddle.net/5ehK6/2/

$(document).ready(function() {
$("#menu-nav").click(function(e) {
    e.stopPropagation(); // this stops the bubbling from going any higher
});
$('body').click(function(){ // this is only reached if the clicks comes outside the #menu-nav
    $("#menu-nav ul ul").slideUp('fast');
});
$("#menu-nav ul ul").hide();
$("#menu-nav ul li.top li").click(function() {
    $("#menu-nav ul ul ul").slideUp("fast", function() {});

    $("ul:first", this).slideDown("fast", function() {
        $("ul", this).slideUp("fast");
    });
    return false;
});
$("#menu-nav ul li.top").click(function() {
    $("#menu-nav ul ul").slideUp("fast", function() {});

    $("ul:first", this).slideDown("fast", function() {
        $("ul", this).slideUp("fast");
    });
    return false;
});
});​