jQuery动态追加菜单(一级菜单、二级菜单分开写)

写二级菜单的时候，大部分都是将二级菜单写入在一级菜单内部，如下所示：

    <div class="nav2">
      <ul class="nav2-ul">
        <li class="nav2-li">
          菜单一
          <div class="nav2-menu one2" style="display: none;">
            <div>我是一号菜单</div>
          </div>
        </li>
        <li class="nav2-li">
          菜单二
          <div class="nav2-menu two2" style="display: none;">
            <div>我是二号菜单</div>
          </div>
        </li>
        <li class="nav2-li">
          菜单三
          <div class="nav2-menu three2" style="display: none;">
            <div>我是三号菜单</div>
          </div>
        </li>
        <li class="nav2-li">
          菜单四
          <div class="nav2-menu four2" style="display: none;">
            <div>我是四号菜单</div>
          </div>
        </li>
      </ul>
    </div>

还有一种写二级菜单的方式，将二级菜单写在外边，通过append将二级菜单追加给一级菜单，代码如下：

<!-- 二级菜单与一级菜单分开写 -->
    <div class="nav">
      <ul class="nav-ul">
        <li class="nav-li nav-li1" id="nav-li1">菜单一</li>
        <li class="nav-li nav-li2">菜单二</li>
        <li class="nav-li nav-li3">菜单三</li>
        <li class="nav-li nav-li4">菜单四</li>
      </ul>
      <div>
        <div class="nav-menu one" id="one" style="display: none;border: 1px solid #000000;">
          <div>我是一号菜单</div>
        </div>
        <div class="nav-menu two" id="two" style="display: none;border: 1px solid #000000;">
          <div>我是二号菜单</div>
        </div>
        <div class="nav-menu three" id="three" style="display: none;border: 1px solid #000000;">
          <div>我是三号菜单</div>
        </div>
        <div class="nav-menu four"  id="four" style="display: none;border: 1px solid #000000;">
          <div>我是四号菜单</div>
        </div>
      </div>
    </div>

jQuery部分：

$(function(){
  // 二级菜单与一级菜单分开写
  // 将二级菜单追加到一级菜单内部
  var navOne = document.getElementById("one");
  var navTwo = document.getElementById("two");
  var navThree = document.getElementById("three");
  var navFour = document.getElementById("four");
  $(".nav-li1").append(navOne);
  $(".nav-li2").append(navTwo);
  $(".nav-li3").append(navThree);
  $(".nav-li4").append(navFour);
  // 第一种写法
  $(".nav-li").hover(function(){
    $(this).children(".nav-menu").show()
  },function(){
    $(this).children(".nav-menu").hide()
  })
  // 第二种写法
  // $(".nav-li").mouseover(function(){
  //   $(this).children(".nav-menu").show();
  // });
  // $(".nav-li").mouseout(function(){
  //   $(this).children(".nav-menu").hide();
  // })
})

在写样式的时候，二级菜单的父级可以不需要写类名和样式，写的话，注意下边写的时候不要在二级菜单的类名前加上父级的类名，这样会导致有些功能不出现。
在没有追加之前的显示：

菜单追加进去之后的显示：