Oi eu preciso que meu submenu scroll para aparecer as outras opções pq quando abre não cabe na página, e nem nos layouts de tablet e de celular. Ja tentei usar o css overflow-y e mais não está funcionando então estou procurando uma solução em jquery, mais não consegui nada ainda. Alguem poderia dar uma olhada e uma ajuda? Obrigado.
fiddle: https://jsfiddle.net/w4pnams9/2/
HTML
<nav class="nav" id="nav">
<span class="menuMobile" id="menuMobile">☰</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");
});
}