Hacer una barra de navegación con un menú desplegable que se desplegase automáticamente al pasar el ratón por encima de un elemento de dicha barra y que al abandonar el elemento se ocultase automaticamente.
He conseguido hacer casi todo, pero cuando quiero que el menu desplegable desaparezca sin haber entrado en el no me funciona. Ni mi profesor ni yo hemos conseguido dar con la respuesta y estoy convenido que es algo supersencillo que se me escapa.
A continuación dejo todo el codigo.
$(document).ready(function (){
$(".dropdown-toggle").on("mouseover", function () {
$(".dropdown-menu").show("slow");
});
$(".dropdown-menu").on("mouseleave", function () {
$(".dropdown-menu").hide("slow");
});
});
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a href="#" class="dropdown-toggle navbar-brand" data-toggle="dropdown">Menu 1 </a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
<a href="#" class="navbar-brand"> Menu 2</a>
<a href="#" class="navbar-brand"> Menu 3</a>
<a href="#" class="navbar-brand"> Menu 4</a>
</div>
</nav>