将2个菜单添加到1个汉堡包中

Question

我想在移动网站上将我的主Nav菜单和顶级菜单附加到一个汉堡菜单中。这是通过切换来完成的，它可以正常工作，直到我添加3行来尝试并附加2个菜单栏。搜索和查找后，我找不到有关如何执行此操作的信息。我尝试过的代码如下所示，这也引发了一些我不知道如何解决的问题。

首先它导致小提琴和网页崩溃。我在猜测下一个问题，它只是反复追加。

rightTop菜单将附加到汉堡菜单（.menu ul）以及每个子子菜单。当它被激活时，它也会附加在.hamburger div中。这不应该是这种情况，它应该只在汉堡菜单的顶层附加一次。

当附加rightTop菜单时，它会保留其现有样式等。如何使其采用.menu ul样式和适用的CSS？

小提琴： http://keystonejs.com/docs/database/#fieldtypes-location

JQuery的：

jQuery(document).ready(function () {
    jQuery('#toggle-nav').click(toggleNav);

    function toggleNav(e) {
        e.stopPropagation();
        jQuery(this).toggleClass('active');
        jQuery('.menu ul').toggleClass('active');
        jQuery('.hamburger ul').toggleClass('active');
        jQuery('.dimmer').toggleClass('active');
        jQuery('body').toggleClass('no-scrolling');

        var $rightTop = $('.rightTop');
        $rightTop.appendTo('.menu ul');
        jQuery('.hamburger ul').addClass('BothNav');

        e.preventDefault();
    }
});

CSS：

.top
{
    background-color: black;
    width: 100%;
    height: auto;
}

.topWrapper
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    position:relative;
    background-color: black;
    flex: 1;
    z-index: 1;
}
.rightTop
{
    flex-grow: 1;  
    order: 2;
    text-align: center;
    padding-right: 10px;
}

.rightTop > ul
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    display:inline-block;
    padding-top: 5px;
    padding-bottom: 5px;
}

.rightTop > ul > li
{
    position: relative;
    display:inline-block;    
    vertical-align: middle;
}

.rightTop > ul > li:not(:last-of-type)
{
    border-right: 2px solid white;
}

.rightTop > ul > li > a
{
    display: inline-block;
    color: white;
    vertical-align: middle;
    font-weight: 700;
    padding: 0px 16px;
}

.rightTop > ul > li > a:hover
{
    text-decoration: underline; 
    color: white;
    transition: 1s ease-out;
}

.main
{
    background-color: white;
    width: 100%;
}

.mainWrapper
{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background-color: white;
    flex: 1;    
}

/*NAVIGATION MENUS*/
.nav
{
    background-color: blue;
    z-index: 1;
}

.navWrapper
{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    flex-direction: column;
    flex-grow: 1;
}

/*HORIZONTAL MENU*/
.menu
{
    flex-grow: 1;
}

.menu ul.navList
{
  list-style: none;
  position: fixed;
  left: -60%;
  background:blue;
  min-width: 60%;
  transition: all 600ms ease;
  z-index: 1;
}

.menu ul.active {
  left: 0;
  transition: all 300ms ease;
}

.menu > ul > li > a
{
    text-align: left;
    display:block;
    color: white;
    padding:16px 16px 12px 16px;
    border-bottom:4px solid transparent; /*To offset white underline hover*/
    font-weight: 700;
}

.menu > ul > li a:hover
{
    background-color: red;
    border-bottom: 4px solid #F1F227;
    color: white;
    transition: 1s ease-out;
}

/*HAMBURGER*/
.hamburgerWrapper
{
    display: flex;
    flex-grow: 1;
    justify-content: flex-start;
}

.hamburger 
{
    list-style-type: none;
    left: 0;
    position: absolute;
    width: 100%;
    background-color: blue;
    transition: all 600ms ease;
    z-index: 1;
    vertical-align: middle;
}

.hamburger.active
{
    left: 60%;
    transition: all 300ms ease;
    padding-left: 70%;
}

.hamburger li a
{
    text-align: left;
    display: block;
    color: white;
    padding: 16px 16px 15px 16px;
    cursor: pointer;
    font-weight: 700;
}

#toggle-nav:after {
    padding-left: 10px;
    display: inline-block;
    vertical-align: middle;
    content: 'Menu';
}

#toggle-nav span, #toggle-nav span:before, #toggle-nav span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background: white;
  display: inline-block;
  vertical-align: middle;
  position: relative;
}
#toggle-nav span:before {
  display: block;
  content: '';
  position: absolute;
  left: 0;
  top: -10px; 
}
#toggle-nav span:after {
  display: block;
  content: '';
  position: absolute;
  left: 0;
  bottom: -10px;
}

#toggle-nav span, #toggle-nav span:before, #toggle-nav span:after {
  transition: all 500ms ease-in-out;
}
#toggle-nav.active span {
  background-color: transparent;
}
#toggle-nav.active span:before, #toggle-nav.active span:after {
  top: 0;
}
#toggle-nav.active span:before {
  transform: rotate(45deg);
}
#toggle-nav.active span:after {
  transform: rotate(-45deg);
}

/*Sub Menu*/
.menu > ul > li:hover > ul
{
    display: block;
}

.submenu
{
    display:none;
    position:relative;
    background-color: blue;
    white-space: nowrap;
    min-width : 100%;
    list-style-type: none;
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.4);
}

.submenu > li > a
{
    text-align: left;
    display:block;
    color: #fff;
    padding:16px 16px 12px 26px;
    border-bottom:4px solid transparent; /*To offset white underline hover*/
    font-weight: 500;
}

.submenu > li:hover > a
{
  background-color: #062c6b;
  color: #FFDB00;
  border-bottom: 4px solid #F1F227;
  transition: 1s ease-out;
}

/*Child Sub Menu*/
.menu > ul > li > ul > li:hover > ul 
{
    display: block;
}

.subSubmenu
{
    display:none;
    position:relative;
    background-color: blue;
    white-space: nowrap;
    min-width: 100%;
    list-style-type: none;
    bottom: 100%;
    /*top: 0;*/
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.4);
}

.subSubmenu > li > a
{
    text-align: left;
    display:block;
    color: #fff;
    padding:19px 16px 12px 36px;
    border-bottom:4px solid transparent; /*To offset white underline hover*/
    font-weight: 300;
}

.menu > ul > li > ul > li:hover > ul > li:hover > a
{
  background-color: red;
  color: #C5EFF7;
  border-bottom: 4px solid #F1F227;
  transition: 1s ease-out;
}

/*COMBINE MENUS*/
.BothNav
{ 
  background:#506b97;
  z-index: 1;
}

/*Dimmer to dim background and no scolling when Hamburger menu is shown*/
.dimmer {
  z-index: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: none;
}

.dimmer.active 
{
  display: block;
}

body.no-scrolling 
{
  overflow: hidden;
}

HTML：

<body>
<div id="container">
<div class="top">
<div class="topWrapper">
            <div class="rightTop">
            <ul>
                <li><a href="#">RightTop1</a></li>
                <li><a href="#">RightTop2</a></li>
                <li><a href="#">RightTop3</a></li>
            </ul>
        </div>
</div>
</div>
<div class="nav">
<div class ="navWrapper">
<nav role="navigation" class="menu">  
    <div class="hamburgerWrapper">
        <ul class="hamburger">
            <li><a id="toggle-nav" href="#"><span></span></a></li>
        </ul>
    </div>
    <ul class="navList">
        <li><a href="#">NavMenu1</a></li>
        <li><a href="#">NavMenu2</a></li>
        <li><a href="#">NavMenu3</a></li>
        <li>
        <a href="#">NavMenu4</a>
            <ul class="submenu">
                <li><a href="#">Sub1</a></li>
                <li><a href="#">Sub2</a></li>
                <li><a href="#">Sub3</a></li>
                <li><a href="#">Sub4</a>
                    <ul class="subSubmenu">
                        <li><a href="#">SubSub1</a></li>
                        <li><a href="#">SubSub2</a></li>
                    </ul>
                </li>
            </ul>
        </li> 
    </ul>
</nav>
</div>
</div>
<div class="dimmer"></div>     
<div class="main">
<main role ="main" class="mainWrapper">
</main>
</div>
</div> 
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script src="../Javascript/JavaScript.js"></script>