サブベアリング（スクロール）jqueryの

Question

こんにちは、私はあなたがページ上ではなく、タブレットのレイアウトやモバイルに収まらない開いたときに他のオプション原因を示すために、私のサブメニューのスクロールが必要です。すでにオーバーフロー-YのCSSを使用してみましたし、それ以上はので、私はjqueryのでソリューションを探しています、ほとんどはまだ何も取得していない機能していません。誰かが見て、助けてもらえますか？ ありがとうございます。

フィドル：https://jsfiddle.net/w4pnams9/2/

HTML

<nav class="nav" id="nav"> 
    <span class="menuMobile" id="menuMobile">&#9776</span> 
     <ul id="navulfirst"> 
     <li><a href="#"><img class="lupa" alt="Pesquisar" src="img/lupa.png" ></a> 
      <div id="caixaPesquisa"> 
       <form id="formPesquisa" action="" method="post"> 
        <input id="pesquisa" type="text" value="" maxlength="150" placeholder="Pesquisar..."> 
        </form> 
       </div> 
      </li> 
      <li><a href="#">Página Inicial</a></li> 
      <li><a href="#">Produtos<img class="flechaVertical" alt="Flecha" src="img/flecha.png"></a> 
      <ul> 
       <li><a href="#">Aparadores de livros</a></li> 
        <li><a href="#">Caixinhas</a></li> 
        <li><a href="#">Chaveiros</a></li> 
        <li><a href="#">Decoração</a></li> 
        <li><a href="#">Pontos Turísticos</a></li> 
        <li><a href="#">Porta Celulares</a></li> 
        <li><a href="#">Porta Guardanapos</a></li> 
        <li><a href="#">Porta Retratos</a></li> 
        <li><a href="#">Relógios</a></li> 
        <li><a href="#">Topos de Bolos</a></li> 
        <li><a href="#">Veículos</a></li> 
       </ul> 
      </li> 
      <li><a href="#"><img id="navLogo" class="navLogo" alt="Versatyll" src="img/logotipo.png"></a></li> 
      <li><a href="#">Sobre</a></li> 
      <li><a href="#">Contatos</a></li> 
      <li><a href="#">Dúvidas</a></li> 
     </ul> 
    </nav> 

CSS

 .lupa{ 
    width:30px; 
    height:30px; 
    padding-left:35px;  
} 

.flechaVertical{ 
    width:8px; 
    height:8px; 
    padding-left:5px; 
    padding-top:20px; 
    position:absolute; 
    transform:rotate(-90deg); 
    -moz-transform:rotate(-90deg); 
    -webkit-transform:rotate(-90deg); 
    -o-transform:rotate(-90deg); 
    -ms-transform:rotate(-90deg); 
} 

.menuMobile{ 
    width:40px; 
    height:40px; 
    position:fixed; 
    display:block; 
    text-align:center; 
    background-color:#FFFFFF; 
    font-size:30px; 
    cursor:pointer; 
    z-index:100; 
    left:0; 
    -moz-transition:left 1s ease; 
    -webkit-transition:left 1s ease; 
    -o-transition:left 1s ease; 
    -ms-transition:left 1s ease; 
} 

#menuMobile.visible{ 
    left:200px; 
} 

.navLogo{ 
    width:160px; 
    height:90px; 
    display:block;  
} 

.nav{ 
    width:200px; 
    text-align:left; 
    background-color:#FFFFFF; 
    position:fixed; 
    z-index:101; 
    left:-200px; 
    transition:left 1s ease; 
    -moz-transition:left 1s ease; 
    -webkit-transition:left 1s ease; 
    -o-transition:left 1s ease; 
    -ms-transition:left 1s ease; 
} 

#nav.visible{ 
    left:0; 
} 

.nav ul{ 
    list-style:none; 
    padding:0; 
    margin:0; 
    position:relative;  
} 

#navulfirst li:nth-child(4){ 
    display:none; 
} 

#navulfirst li ul li:nth-child(4){ 
    display:block; 
    /* Para aparecer o li do segundo ul */ 
} 

.nav ul li a,visited{ 
    color:#000000; 
    display:block; 
    padding:20px; 
    padding-left:45px; 
    text-decoration:none; 
} 

.nav ul li a:hover{ 
    color:#990000; 
    text-decoration:none; 
} 
/*-------------------------------*/ 

/* Nav Submenu */ 

.nav ul li:hover ul{ 
    display:block; 
} 

.nav ul ul{ 
    display:none; 
    position:absolute; 
    background-color:#FFFFFF; 
    margin-left:100%; 
    margin-top:-30%; 
    height:550px; 
    width:180px; 
    z-index:101; 
} 

.nav ul ul li{ 
    display:block; 
    padding:10px; 
} 

.nav ul ul li a,visited{ 
    color:#000000; 
    padding:0;  
} 

.nav ul ul li a:hover{ 
    color:#FFFFFF; 
    background-color:#990000; 
} 

JS

 ShowHide(); 
MenuMobile(); 

//Functions 

function ShowHide(){ 
    $(".lupa").click(function(){ 
     $("#pesquisa").css("display", "inline-block"); 
    }); 

    $("#pesquisa").blur(function(){ 
     $(this).css("display", "none"); 
    }); 
} 

function MenuMobile(){ 
    $(".menuMobile").click(function(){ 
     $(".nav").toggleClass("visible"); 
     $(".menuMobile").toggleClass("visible"); 
    }); 
} 

Answer 1

<ul style="height:100px;overflow:hidden;overflow-y: scroll;"> 
       <li><a href="#">Aparadores de livros</a></li> 
       <li><a href="#">Caixinhas</a></li> 
       <li><a href="#">Chaveiros</a></li> 
       <li><a href="#">Decoração</a></li> 
       <li><a href="#">Pontos Turísticos</a></li> 
       <li><a href="#">Porta Celulares</a></li> 
       <li><a href="#">Porta Guardanapos</a></li> 
       <li><a href="#">Porta Retratos</a></li> 
       <li><a href="#">Relógios</a></li> 
       <li><a href="#">Topos de Bolos</a></li> 
       <li><a href="#">Veículos</a></li> 
      </ul>