如何将“多级菜单添加到汉堡菜单”

$(function() {
$('#menu > .item-submenu .submenu').click(function(){
    if($('.item-submenu .sub-menu').css('display') == 'none'){
            $('.item-submenu .sub-menu').css({'display':'block'});
    } else {
            $('#menu > .item-submenu .sub-menu').css({'display':'none'}); 
}
});
$('#menuToggle > input').click(function(){
    $('#menu > .item-submenu .sub-menu').css({'display':'none'}); 
});
});

       body {
            margin: 0;
            padding: 0;
            /* make it look decent enough */
            background: #232323;
            color: #cdcdcd;
            font-family: "Avenir Next", "Avenir", sans-serif;
        }
        a {
            text-decoration: none;
            color: #fff;
            transition: color 0.3s ease;
        }
        a:hover {
            font-weight: bold;
        }
        #menuToggle {
            display: block;
            position: relative;
            top: 50px;
            left: 50px;
            z-index: 1;
            -webkit-user-select: none;
            user-select: none;
        }
        #menuToggle input {
            display: block;
            width: 40px;
            height: 32px;
            position: absolute;
            top: -7px;
            left: -5px;
            cursor: pointer;
            opacity: 0;
            z-index: 2;
            -webkit-touch-callout: none;
        }
        #menuToggle span {
            display: block;
            width: 33px;
            height: 4px;
            margin-bottom: 5px;
            position: relative;
            background: #fff;
            border-radius: 3px;
            z-index: 1;
            transform-origin: 4px 0px;
            transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
        }
        #menuToggle span:first-child {
            transform-origin: 0% 0%;
        }
        #menuToggle span:nth-last-child(2) {
            transform-origin: 0% 100%;
        }
        #menuToggle input:checked ~ span {
            opacity: 1;
            transform: rotate(45deg) translate(-2px, -1px);
            background: #fff;
        }
        #menuToggle input:checked ~ span:nth-last-child(3) {
            opacity: 0;
            transform: rotate(0deg) scale(0.2, 0.2);
        }
        #menuToggle input:checked ~ span:nth-last-child(2) {
            transform: rotate(-45deg) translate(0, -1px);
        }
        #menu {
            position: absolute;
            width: 300px;
            height: 1000px;
            margin: -100px 0 0 -90px;
            padding-top: 125px;
            background: #008040;
            list-style-type: none;
            -webkit-font-smoothing: antialiased;
            transform-origin: 0% 0%;
            transform: translate(-100%, 0);
            transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
        }
        #menu li {
            padding: 10px 0;
            font-size: 22px;
        }
        #menuToggle input:checked ~ ul {
            transform: none;
        }
        .sub-menu li {
            list-style-type: none; 
            padding: 4px!important;
            margin-bottom: -5px;
            
        }
        .sub-menu li a {
            font-size: 17px;
        }
        .sub-menu {
        display: none;
        margin: 0px 0 0 -41px;
        background: #0000002e;
    }
    .item-submenu > a:after {
	font: normal normal normal 14px/1 FontAwesome;
  	font-size: inherit;
  	text-rendering: auto;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
      content: "\f078";
	float: right;
    margin-right: 10px;
}
.item-submenu {
    margin-bottom: -14px;
}

<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav role="navigation">
            <div id="menuToggle">
              <!-- checkbox is used as click reciever. -->
              <input type="checkbox" />
          
              <!-- spans to act as a hamburger. -->
              <span></span>
              <span></span>
              <span></span>
              
              <ul id="menu">
                <hr>
                <a href="#">
                  <li>Home</li>
                </a>
                <hr>
                <li class="item-submenu">
                 <a href="#" class="submenu">About</a>
                <ul class="sub-menu">
                    <li><a href="#">The Organisation</a></li>
                    <hr>
                    <li><a href="#">The Team</a></li>
                </ul>
                </li>
                <hr>
                <a href="#">
                  <li>Schedule</li>
                </a>
                <hr>
              </ul>
            </div>
          </nav>