How to empty the <ul> in the nest <li> using jquery
<p>I'm trying to create a menu and its sub menu, but receiving the data from database. And I created the menu successfully, this is my code :</p>

<pre><code> $(document).ready(function () {
    var url = '&lt;%: Url.Content("~/") %&gt;' + "Products/GetMenuList";
    $.getJSON(url, function (data) {
    var mainMenu = $("#content ul#navmenu-v");
        $.each(data, function (index, dataOption) { 
           var new_li = $("&lt;li id='level1'&gt;&lt;a href='javascript:void(0);' id='" 
                       + dataOption.ID + "' class ='selectedcategory'&gt;" + 
                       dataOption.Name + "&lt;/a&gt;");
        mainMenu.append(new_li);

    });
     $('.selectedcategory').mouseover(function () {
     $("ul#subCat").empty();
     $("li#level1").append("&lt;ul id='subCat'&gt;");
     var urlCat = '&lt;%: Url.Content("~/") %&gt;' + "Products/GetCategoryList";
        $.getJSON(urlCat, { Depid: this.id }, function (dataCat) {
           $.each(dataCat, function (indexCat, dataOptionCat) {
           $("ul#subCat").append("&lt;li&gt;&lt;a href='javascript:void(0);' 
              class='selectedsubcat' id='" + dataOptionCat.id + "'&gt;" + 
                dataOptionCat.Name + "&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;");
           });
       });
   }); 
  });
});
</code></pre>

<p>This is the HTML :</p>

<pre><code>&lt;div id="content"&gt;
 &lt;ul id='navmenu-v'&gt;
 &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>But it didn't get the right sub menu due to the main menu.
Could anyone show me some suggestion please.</p>

<p>Thanks so much.</p>
