JQuery-RWD-multi-level-menu

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="sidenav.js"></script>

HTML

    <a id="openPageslide" href="#pageslide"><span></span></a>
		<div id="pageslide" class="navBox">
          <ul>
            <li>
              <a href="http://tw.yahoo.com">item1</a>
            </li>
            <li>
              <a href="http://tw.yahoo.com">item2<i class="fa fa-angle-down"></i></a>
              <ul class="dropNav">
                <li><a href="#">item2-1</a></li>
                <li><a href="#">item2-2</a></li>
                <li><a href="#">item2-1</a></li>
                <li><a href="#">item2-1</a></li>
                <li><a href="#">item2-1</a></li>
              </ul>
            </li>
            <li>
              <a href="#">item3<i class="fa fa-angle-down"></i></a>
              <ul class="dropNav">
                <li><a href="#">item3-1</a></li>
                <li><a href="#">item3-2</a></li>
                <li><a href="#">item3-1</a></li>
                <li><a href="#">item3-1</a></li>
                <li><a href="#">item3-1</a></li>
              </ul>
            </li>
            <li>
              <a href="#">item4</a>
            </li>
            <li>
                <a href="#">item5</a>
            </li>
            
          </ul>
    </div>

CSS

    body,
    ul{ margin:0; padding:0; }
    
    .navBox{ overflow: hidden; background: #18B3FF;}
    .navBox a { display: block;padding: 14px 10px; color: #fff; text-align: center; text-decoration: none;}
    .navBox .active { background: #474747;}
    .navBox ul{ max-width: 990px; margin:0 auto; overflow: hidden;  }
    .navBox ul li { float: left; list-style: none;}
    .navBox ul li .fa { padding-left: 4px;}
    .navBox .dropNav {display: none; width: 100%;padding:5px 0;position: absolute;left: 0; right: 0; top: inherit;background: #474747;z-index: 7; overflow:hidden;}
    .navBox>ul>li.active{ background-color:#474747;}
    
    @media only screen and (min-width: 991px) {
      #openPageslide { display: none; }
      #pageslide { display: block !important;}
      .pageslideBg { display: none !important;}
    }
    @media screen and (max-width: 990px){
    
      .navBox ul li{ float:none;}
      .navBox>ul>li{ border-bottom: 1px solid #1C93CE;}
      .navBox>ul>li>a{     padding: 10px; }
      .navBox .dropNav{ position:static; background:#0F80B8; }
    
      #openPageslide { display: block; padding: 14px 10px; width: 28px; border-radius: 6px;}
      #openPageslide span{height: 7px;display: block;border: 1px solid #0F80B8;border-width: 5px 0; }
      #pageslide {display: none; width: 200px; position:fixed; top: 0; left: -200px; height: 100%; z-index: 999999; overflow-y: auto;  }
      .pageslideBg{ display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,0.6); z-index: 9998;}
    }

JS:

     $(function(){
        var responsiveWidth = 990;
        var _widthResize;
    
        $(window).resize(function() {
            _widthResize = $(this).width() > responsiveWidth;
        }).resize();
    
        $('.navBox >ul >li').hover(function(){
          if(_widthResize){
            var _this = $(this);
            _this.addClass('active').children('.dropNav').stop(true, true).slideDown(300);        
          }  
        } , function(){
          if(_widthResize){
            $(this).removeClass('active').children('.dropNav').stop(true, true).hide();
          }   
        });
    
        $('.dropNav').parent('li').click(function(e) {
          if(!_widthResize){
            $(this).children('.dropNav').stop(true, true).slideToggle(300);
            e.preventDefault();
          }    
        });
    
        $("#openPageslide").sideNav();
    
    }); 

sidenav.js

(function($){
  $.fn.extend({

        sideNav : function(){
          if( $('.pageslideBg').length == 0 ) {
                $('<div />').attr( 'class', 'pageslideBg' ).appendTo( $('body') );      
            }
            var $btn = $(this),
              $pageslide = $($btn.attr("href")),
            $pageslideBg = $('.pageslideBg'),
            _width = $pageslide.width();
          $btn.click(function(){
            $pageslideBg.show();
            $pageslide.css({ 'display':'block'}).animate({'left':0 });
            return false;
          });
          $pageslideBg.click(function() {
            $(this).hide();
            $pageslide.animate({'left': _width*-1 + 'px' },function(){
              $(this).hide();
            });
            return false;
          });
    
          return this;
        }

  });
})(jQuery);