Javascript Jquery菜单数组在错误位置打开ul

我正在从数组创建Jquery菜单项

(function ($) {
var menu = [{
    title: "Home",
    href: "/"
}, {
    title: "Item 1",
    href: "/item2",
    items: [{
        title: "Sub",
        href: "/sub"
    }, {
        title: "Sub",
        href: "/sub"
    }]
}, {
    title: "Item 2",
    href: "/item2",
    items: [{
        title: "sub2",
        href: "/sub2"
    }, {
        title: "sub2",
        href: "/sub2",
        items: [{
            title: "sub3",
            href: "/sub3"
        }, {
            title: "Sub3",
            href: "/sub3"
        }, {
            title: "sub3",
            href: "/sub3"
        }, {
            title: "sub3",
            href: "/sub3"
        }]
    }, {
        title: "Item 3",
        href: "/item3"
    }]
}, {
    title: "Item 4",
    href: "/item4"
}];

$('nav').append(globalMenu(menu));

function globalMenu(el){
    console.log(el)
    var ul = $('<ul>')

    $.each(el, function(){
        var li = $('<li>')
        li.append($('<a>', {text : this.title, href : this.href}));           
        ul.append(li)
        if(this.items) li.after(globalMenu(this.items)); 
    })

    return ul;
}

}(jQuery));

（函数（$）{
变量菜单=[{
标题：“家”，
href:“/”
}, {
标题：“项目1”，
href:“/item2”，
项目：[{
标题：“分包商”，
href:“/sub”
}, {
标题：“分包商”，
href:“/sub”
}]
}, {
标题：“项目2”，
href:“/item2”，
项目：[{
标题：“sub2”，
href:“/sub2”
}, {
标题：“sub2”，
href:“/sub2”，
项目：[{
标题：“sub3”，
href:“/sub3”
}, {
标题：“Sub3”，
href:“/sub3”
}, {
标题：“sub3”，
href:“/sub3”
}, {
标题：“sub3”，
href:“/sub3”
}]
}, {
标题：“项目3”，
href:“/item3”
}]
}, {
标题：“项目4”，
href:“/item4”
}];
$（'nav'）.append（全局菜单（菜单））；
函数全局菜单（el）{
控制台日志（el）
变量ul=$（“
”）
$.each（el，function（）{
变量li=$（“
”）
li.追加（$（'

It子ULs应位于父项的内，如下所示：

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/item2">Item 1</a>
        <ul>
          <li><a href="/sub">Sub</a></li>
          <li><a href="/sub">Sub</a></li>
        </ul>
    </li><!-- close parent LI here -->
    <li><a href="/item2">Item 2</a></li>
    </ul>
 </nav>

谁能帮我解决这个问题

---

这里是小提琴：

而不是使用

li。在
之后使用
li。追加


<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/item2">Item 1</a>
        <ul>
          <li><a href="/sub">Sub</a></li>
          <li><a href="/sub">Sub</a></li>
        </ul>
    </li><!-- close parent LI here -->
    <li><a href="/item2">Item 2</a></li>
    </ul>
 </nav>