jquery scroll submenu

Hi I need my scroll submenu to appear the other options because when it opens it does not fit the page, nor 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 have not got anything yet. Could someone have a look and a help? Thank you.

fiddle: link

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");
    });
}