Can't close dropdown in twitter bootstrap 3.1.0

Question

I created a navbar and added a .slideDown() and .slideUp() effect on two dropdowns

This how it works:

If i hover my mose to the dropdown the the .mouseenter() event is triggered and the contents of the dropdown will slide down and if i unhover my mouse to the dropdown it will slide up and hide the contents.

Problem:

When i unhover the mouse on the first dropdown, it won't hide and when i try in the second i hovered it and it didn't work, i clicked it it worked but won't hide when i unhover my mouse to the second dropdown.

Fiddle: http://jsfiddle.net/jakobaindreas11/32S7a/

Answer 1

Your script has to be

$(document).ready(function () {
    $(".dropdown").mouseenter(function () {
        $(this).children('.dropdown-menu').stop().slideDown();
    }).mouseleave(function () {
        $(this).children('.dropdown-menu').stop().slideUp();
    });
});

Demo: Fiddle