I was trying to make and hover dropdown menu but I cant, well not really, I can make that the menu toggle just the specific items, with my code show all the items available:
Code here:
$(document).on('ready', function(){
var timeout = 0;
$('.nav').hover(function(){
$('.dropdown-menu').slideDown('fast');
},function(){
timeout = setTimeout(hideMenu,300);
});
$(".dropdown-menu").hover(function(){
clearTimeout(timeout);
},function(){
hideMenu();
});
});
function hideMenu(){
$(".dropdown-menu").slideUp('fast');
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-static-top navbar-default">
<div class="container">
<div id="cls">
<div class="navbar-header center">
<div class="navbar-header">
<a href="/"><img class="logo" src="paruno_logo.png"></a>
<ul id="main-menu" class="nav navbar-nav ref">
<li class="dropdown dropdown-large option">
<a id="drop-to" href="/femenino/calzado" class="dropdown-toggle firstTextOption" data-toggle="dropdown">GIRL</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="n-smasd">
<ul>
<li class="dropdown-header title"><a href="/femenino/calzado/zapato">Zapatos</a></li>
</ul>
<ul>
<li class="dropdown-header title"><a href="/femenino/calzado/botin">Botines</a></li>
</ul>
<ul>
<li class="dropdown-header title"><a href="/femenino/calzado/bota">Botas</a></li>
</ul>
<ul>
<li class="dropdown-header title"><a href="/femenino/calzado/sandalia">Sandalias</a></li>
</ul>
<ul>
<li class="dropdown-header title"><a href="/femenino/calzado/tenis">Tenis</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large option hidden-sm hidden-xs">|</li>
<li class="dropdown dropdown-large option">
<a id="drop-to" href="/masculino/calzado" class="dropdown-toggle firstTextOption" data-toggle="dropdown">HUMMIE</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title"><a href="/masculino/calzado/casual">Casuales</a></li>
</ul>
<ul>
<li class="dropdown-header title"><a href="/masculino/calzado/mocasin">Mocasines</a></li>
</ul>
</li>
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title"><a href="/masculino/calzado/bota">Botas</a></li>
</ul>
<ul>
<li class="dropdown-header title"><a href="/masculino/calzado/tenis">Tenis</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large option hidden-sm hidden-xs">|</li>
<li class="dropdown dropdown-large option">
<a id="drop-to" href="#" class="dropdown-toggle firstTextOption" data-toggle="dropdown">SOULCREATION</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title"><a href="/rapsodia_lookbook_fall16/">ANGER</a></li>
</ul>
</li>
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title"><a href="/rapsodia-lookbook-2/">SOUL</a></li>
</ul>
</li>
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title"><a href="/revista-rapsodia-1/">URBAN</a></li>
</ul>
</li>
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title"><a href="/revista-rapsodia-1/">ART</a></li>
</ul>
</li>
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title"><a href="/revista-rapsodia-1/">ALAN ARROUND THE MUNDO</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large option hidden-sm hidden-xs">|</li>
<li class="dropdown dropdown-large option">
<a id="drop-to" href="/femenino/calzado" class="dropdown-toggle firstTextOption"> MAGNIFICIENT </a>
</li>
</ul>
</div>
<!-- /MB -->
</div>
</div>
</div>To give more information, I use Bootstrap to make a responsive navbar and I don't want to use the Javascript from Bootstrap beacuse I want to get a pure Javascript.
