我有一个多个链接的菜单，在悬停时会有一个下拉菜单滑下来。每个链接都有自己的下拉列表。我的问题是，当你通过移动鼠标进出悬停大小来调用很多事件时，即使你停止悬停，它也会一直上下滑动。

setInterval(function(){

    if($("header nav ul li.product:hover").length != 0){
        $("header .dropdown-support").slideUp("slow", function(){
            alert();
            $("header .dropdown-product").slideDown(500);
        });
        $("header .dropdown-store").slideUp(500, function(){
            $("header .dropdown-product").slideDown(500);
        });
    }
    else{
        if($("header .menu-dropdown:hover").length == 0 && $("header nav ul:hover").length == 0){
            $("header .dropdown-product").slideUp();
        }
    }

    if($("header nav ul li.support:hover").length != 0){
        $("header .dropdown-product").slideUp(500, function(){
            $("header .dropdown-support").slideDown(500);
        });
        $("header .dropdown-store").slideUp(500, function(){
            $("header .dropdown-support").slideDown(500);
        });
    }
    else{
        if($("header .menu-dropdown:hover").length == 0 && $("header nav ul:hover").length == 0){
            $("header .dropdown-support").slideUp();
        }
    }

    if($("header nav ul li.store:hover").length != 0){
        $("header .dropdown-product").slideUp(500, function(){
            $("header .dropdown-store").slideDown();
        });
        $("header .dropdown-support").slideUp(500, function(){
            $("header .dropdown-store").slideDown();
        });
    }
    else{
        if($("header .menu-dropdown:hover").length == 0 && $("header nav ul:hover").length == 0){
            $("header .dropdown-store").slideUp();
        }
    }
}, 500);

类似于这个jsfiddle：http://jsfiddle.net/amkrtchyan/4jxph/2/
有谁知道我该怎么做？谢谢