Submenu bearing(scroll) jquery

Question

Hi I need my submenu scroll to appear the other options pq when opening does not fit on the page, and neither in the tablet and mobile layouts. I’ve tried using css overflow-y and more is not working so I’m looking for a solution in jquery, but I haven’t got anything yet. Could someone take a look and help? Thank you.

fiddle: 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

The overflow-y: scroll will only take effect if you specify a shorter height than needed to display all submenu items (for example, with height: 300px the scroll is already working well).

However, in terms of usability, it’s horrible to put a scroll in a submenu. I suggest you adjust the margin-top so that the submenu appears higher.

All that I said refers to .nav ul ul.