在jquery菜单中滚动而不是背景

Question

在网站的移动版本上，我有一个汉堡包jquery菜单，显示所有菜单和子菜单项。到目前为止这么好，但问题是，如果我有很多菜单项，它将不适合屏幕大小因此一些项目或不可见。只需滚动菜单本身即可访问它们，这将是一个简单的解决方案。

简而言之：当菜单打开时，如何在jquery菜单中启用滚动？

我已经附上了截图，让您了解我的菜单如何： Imgur link of screenshot

＆＃13;

＆＃13;

/* Site navigation */
.navbar {
  position: relative;
  width: 100%;
  height: 70px;
  background-color: rgba(0,120,191,0.8);
  z-index: 9999;
}
.default-menu {
  display: block;
  float: right;
}

/* Expanding submenus */
ul.jquerymenu li.parent {
  position: relative;
}
ul.jquerymenu li.parent span.parent {
  display: none;
}
.ie ul.jquerymenu li.parent span.parent {
  display: none;
}
ul.jquerymenu li.parent span.closed {
  background: transparent;
}
ul.jquerymenu li.parent span.open {
  background: transparent;
}
ul.jquerymenu li.parent ul {
  margin: 0;
  width: auto;
  position: absolute;
  top: 70px;
  left: 0;
  box-shadow: -3px 3px 10px 0px rgba(0,0,0,0.2);
}
ul.jquerymenu li.parent ul li {
  width: 100%;
  background-color: #006699;
  text-align: left;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1;
}
ul.jquerymenu li.parent ul li a {
  padding: 20px !important;
  margin: 0;
  display: block;
  line-height: 1.5;
  text-decoration: none;
  color: #fff;
}


.hamburger.mean-container {
  position: absolute;
  z-index: 1;
  right: 0;
}
.mean-container .mean-bar {
  width: 100%;
  height: 70px;
  min-height: 70px;
  position: relative;
  background: transparent;
  padding: 0;
}
.mean-container .mean-nav ul li {
  margin: 0;
  font-size: 1.6rem;
}
.mean-container .mean-nav ul li:hover {
  background: rgba(23,41,59,0.8);
}
.mean-container .mean-nav ul li a {
  display: block;
  float: left;
  width: 88%;
  padding: 20px;
  margin: 0;
  text-align: left;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  border-top: 0;
}
.mean-container .mean-nav ul li a:hover {
  color: #fff;
}
.mean-container .mean-nav {
  float: left;
  width: 100%;
  background: #006699;
  margin-top: 70px;
}
.mean-container a.meanmenu-reveal {
  width: 36px;
  height: 30px;
  padding: 20px 16px;
  font-size: 2.8rem;
  line-height: 32px;
}
.mean-container a.meanmenu-reveal span {
  display: block;
  background: #fff;
  height: 5px;
  margin-top: 5px;
}
.mean-container .mean-nav ul li a.mean-expand {
  margin-top: -2px;
  width: 100%;
  height: 44px;
  padding: 12px !important;
  text-align: right;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
  font-weight: 500;
  background: transparent;
  border: 0!important;
  border-left: 0 !important;
  border-bottom: 0 !important;
  font-size: 3rem;
}
.mean-container .mean-nav ul li a.mean-expand:hover {
  background: transparent;
}
.mean-container .mean-nav ul li li a {
  border-top: 0;
}

＆＃13;

<nav class="navbar" style="position: fixed; top: 0px;">

  <div class="container">
    <div class="site-logo">
              <a href="/" title="Title img" rel="home" id="logo">
          <img src="storm-logo-56x182.png" alt="Alt text">
        </a>
   </div>
    
    <div class="hamburger mean-container"><div class="mean-bar"><a href="#nav" class="meanmenu-reveal meanclose" style="right: 0px; left: auto; text-align: center; text-indent: 0px;">X</a><nav class="mean-nav">

    
  <div class="content">
    <!--[if IE]><div class="ie"><![endif]--><ul style="display: block;"><li><span></span><a href="/node" title="">De rijschool</a><ul style="display: none;"><li><a href="/wagenpark" title="">De auto's</a></li><li><a href="/voordelen" title="">Voordelen</a></li><li><a href="/bovag" title="">Bovag</a></li><li><a href="/instructeurs" title="">De instructeurs</a></li><li><a href="/slagingspercentage" title="">Slagingspercentage</a></li><li><a href="/ervaringen" title="">Ervaringen</a></li></ul><a class="mean-expand" href="#" style="font-size: 20">+</a></li><li><span></span><a href="/voordelen" title="">Opleidingen</a><ul style="display: none;"><li><a href="/praktische-autorijlessen" title="">Overzicht</a></li><li><a href="/automaat" title="">Automaat</a></li><li><a href="/handgeschakeld" title="">Handgeschakeld</a></li><li><a href="/theorielessen-0" title="Theorielessen">Theorielessen</a></li></ul><a class="mean-expand" href="#" style="font-size: 20">+</a></li><li><span></span><a href="/voordelen" title="">Specialisme</a><ul style="display: none;"><li><a href="/aanpassingen" title="Rijles met aanpassingen">Aanpassingen</a></li><li><a href="/automaat" title="">Automaat</a></li><li><a href="/adhd-add-en-rijles" title="">Rijles ADHD</a></li><li><a href="/rijles-en-autisme" title="">Rijles en ASS</a></li><li><a href="/rijtest" title="">Rijtest</a></li><li><a href="/vastgelopen-de-rijopleiding" title="">Vastgelopen</a></li></ul><a class="mean-expand" href="#" style="font-size: 20">+</a></li><li><span></span><a href="/trainingen" title="">Trainingen</a><ul style="display: none;"><li><a href="/hybride-training" title="">Hybride rijden</a></li></ul><a class="mean-expand" href="#" style="font-size: 20">+</a></li><li><span></span><a href="/prijzen-auto" title="">Prijzen</a><ul style="display: none;"><li><a href="/prijzen-auto" title="">Auto</a></li><li><a href="/prijzen-theorie" title="">Theorie</a></li></ul><a class="mean-expand" href="#" style="font-size: 20">+</a></li><li><span></span><a href="/" title="">Contact</a><ul style="display: block;"><li><a href="/aanmelden" title="">Aanmelden</a></li><li><a href="/aanvraag" title="">Informatie aanvraag</a></li><li><a href="/bel-mij-terug" title="">Bel mij terug</a></li><li class="mean-last"><a href="/contact">Contactgegevens</a></li></ul><a class="mean-expand mean-clicked" href="#" style="font-size: 20">-</a></li></ul><!--[if IE]></div><![endif]-->  </div>
</nav></div></div>
    
    
  </div>
  
  <span class="js-responsive-dom-placeholder"></span>

</nav>

＆＃13;

＆＃13;

＆＃13;