如何访问动态菜单（JQuery）的第二级？

Question

我有一个仅适用于1级和2级的菜单，但我需要更深入地显示所有子级别。
加载时菜单是这样的：

<ul id="mnav" style="padding-top: 80px; background-color: #337ab7;">
    <?php foreach ($categories as $category) { ?>
    <li><a id="<?php echo $category['category_id']; ?>" class="list-group-item active"><?php echo $category['name']; ?></a></li>
    <?php } ?>
</ul>

我希望有这样的子级别，或者你可能以某种方式提供。

<ul id="menu">
    <li><a href="#">Home</a>
        <ul class="drop">
            <li><a href="#">About us</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">About us</a></li>
            <li>
                <a href="#">About us</a>
                <ul>
                    <li><a href="#">Sub Item 1</a></li>
                    <li>
                        <a href="#">Sub Item 2</a>
                        <ul>
                            <li><a href="#">Sub item 3</a></li>
                            <li><a href="#">Sub item 4</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>

    <li><a href="#">about</a>
        <ul class="drop">
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
        </ul>
    </li>
</ul>

为实现这一目标，我正在使用这样一个脚本：

<script type="text/javascript"> 
    $(document).ready(function(){ 
        $('ul#mnav > li > a').on('click', function(e) { 
            console.log("Level 1"); 
            e.preventDefault(); 
            var cat = $(this).attr('id'); 
            var url = 'index.php?route=test/categoryx/child&category_id=' + cat; 

            $('#mnav #sub1').remove(); 
            $( $("<ul class='sub' id='sub1'>").load(url + "#myContainer") ).insertAfter( '#mnav #' + cat );
        }); 

        $('ul#sub1 a').on('click', function(e) { 
            console.log("Level 2"); 
            e.preventDefault(); 
            var cat = $(this).attr('id'); 
            var url = 'index.php?route=test/categoryx/child&category_id=' + cat; 

            $('#sub2').remove(); 
            $( $("<ul class='sub' id='sub2'>").load(url + "#myContainer") ).insertAfter( 'ul#sub1 #' + cat );
        }); 
</script> 

我尝试了不同的方式来访问第二级，但它没有成功，我尝试了很多不同的东西。