如何停止下拉菜单，jQuery？

我有一个关于这个下拉菜单的研究。下面是代码

HTML:

以及jQuery代码：

$(".nav > li").mouseover(function(){
        $(this).find("> a").css("background-color", "blue");
        $(this).find("ul").fadeIn(500);
    })
    $(".nav > li").mouseleave(function(){
        if($(this).children().size() > 1){
            $(this).find("ul").fadeOut(200, function(){
                $(this).prev().removeAttr("style");
            });
        } else {
            $(this).find("> a").removeAttr("style");
        }
    })

如你所见。下拉效果显示流畅。但是，当用户尝试从左向右快速移动鼠标，选择所有顶部列表菜单时，即使没有必要，下拉效果也会继续完成

jQuery中缺少的代码是什么

谢谢你的帮助。

试试看

$(".nav > li").mouseover(function(){
        $(this).find("> a").css("background-color", "blue");
        $(this).find("ul").stop().fadeIn(500);
    })
    $(".nav > li").mouseleave(function(){
        if($(this).children().size() > 1){
            $(this).find("ul").stop().fadeOut(200, function(){
                $(this).prev().removeAttr("style");
            });
        } else {
            $(this).find("> a").removeAttr("style");
        }
    })

一个或链接将不胜感激

$(".nav > li").mouseover(function(){
        $(this).find("> a").css("background-color", "blue");
        $(this).find("ul").fadeIn(500);
    })
    $(".nav > li").mouseleave(function(){
        if($(this).children().size() > 1){
            $(this).find("ul").fadeOut(200, function(){
                $(this).prev().removeAttr("style");
            });
        } else {
            $(this).find("> a").removeAttr("style");
        }
    })

$(".nav > li").mouseover(function(){
        $(this).find("> a").css("background-color", "blue");
        $(this).find("ul").stop().fadeIn(500);
    })
    $(".nav > li").mouseleave(function(){
        if($(this).children().size() > 1){
            $(this).find("ul").stop().fadeOut(200, function(){
                $(this).prev().removeAttr("style");
            });
        } else {
            $(this).find("> a").removeAttr("style");
        }
    })