Question

I have a JQuery drop down menu which has animated when we hover the menu, the problem is little difficult to explain. Its been continued animation when we hover the top menu several times, you can see that by move your cursor to ‘Our Services’, ‘Locations’ menu continuously around 10, 15 times.

Here is the JSfiddle you can check.. http://jsfiddle.net/bKxXZ/13/

the JQuery code is given below (earlier the code was suggested one of my stack friend gilly3)

$(function() {
    $("ul.topnav li:has(.subnav)").hover(function() {
        $("ul.subnav", this).slideDown('fast').show();
    }, function() {
        $("ul.subnav", this).slideUp('slow');
    });
});

Answer 1

You’ll need to use the stop(true,true) function like this:

$(function() {
$("ul.topnav li:has(.subnav)").hover(function() {
    $("ul.subnav", this).stop(true,true).slideDown('fast').show();
}, function() {
    $("ul.subnav", this).slideUp('slow');
});
});

Note it’s placement before slideDown