Javascript 垂直下拉菜单悬停效果，悬停时关闭子菜单

我有这个菜单，我需要调整一点，因为它不是非常友好的用户。当你看到演示时，你会注意到第一次悬停时会触发悬停效果，并一直保持打开状态，直到再次悬停（Resturant）。我想让它在指针离开链接框时自动关闭。同样，当我一次又一次快速地来回盘旋时，会有15秒的动画。我可以做一些调整吗

这里是一个演示，请注意，它仍在进行中

这是我为这个菜单准备的javascript

        ( function( $ ) {
    $( document ).ready(function() {
    $('#cssmenu li.has-sub>a').mouseenter(function( event ){
            $(this).removeAttr('href');
            var element = $(this).parent('li');
            if (element.hasClass('open')) {
                element.removeClass('open');
                element.find('li').removeClass('open');
                element.find('ul').slideUp();
            }
            else {
                element.addClass('open');
                element.children('ul').slideDown();
                element.siblings('li').children('ul').slideUp();
                element.siblings('li').removeClass('open');
                element.siblings('li').find('li').removeClass('open');
                element.siblings('li').find('ul').slideUp();
            }
        });

        $('#cssmenu>ul>li.has-sub>a').append('<span class="holder"></span>');

        (function getColor() {
            var r, g, b;
            var textColor = $('#cssmenu').css('color');
            textColor = textColor.slice(4);
            r = textColor.slice(0, textColor.indexOf(','));
            textColor = textColor.slice(textColor.indexOf(' ') + 1);
            g = textColor.slice(0, textColor.indexOf(','));
            textColor = textColor.slice(textColor.indexOf(' ') + 1);
            b = textColor.slice(0, textColor.indexOf(')'));
            var l = rgbToHsl(r, g, b);
            if (l > 0.7) {
                $('#cssmenu>ul>li>a').css('text-shadow', '0 0px 0px rgba(0, 0, 0, .35)');
                $('#cssmenu>ul>li>a>span').css('border-color', 'rgba(0, 0, 0, .35)');
            }
            else
            {
                $('#cssmenu>ul>li>a').css('text-shadow', '0 0px 0 rgba(255, 255, 255, .35)');
                $('#cssmenu>ul>li>a>span').css('border-color', 'rgba(255, 255, 255, .35)');
            }
        })();

        function rgbToHsl(r, g, b) {
            r /= 255, g /= 255, b /= 255;
            var max = Math.max(r, g, b), min = Math.min(r, g, b);
            var h, s, l = (max + min) / 2;

            if(max == min){
                h = s = 0;
            }
            else {
                var d = max - min;
                s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
                switch(max){
                    case r: h = (g - b) / d + (g < b ? 6 : 0); break;
                    case g: h = (b - r) / d + 2; break;
                    case b: h = (r - g) / d + 4; break;
                }
                h /= 6;
            }
            return l;
        }
        event.preventDefault();
    });
    } )( jQuery );

（函数（$）{
$（文档）.ready（函数（）{
$（'#cssmenu li.has sub>a'）.mouseenter（函数（事件）{
$（this.removeAttr（'href'）；
var元素=$（this.parent（'li'）；
if（element.hasClass（'open'））{
元素。removeClass（“打开”）；
元素。find（'li'）。removeClass（'open'）；
元素。find（'ul'）。slideUp（）；
}
否则{
元素addClass（'open'）；
element.children（'ul'）.slideDown（）；
元素。兄弟姐妹（'li'）。子元素（'ul'）。slideUp（）；
元素。同级（'li'）。removeClass（'open'）；
元素。同级（'li'）。查找（'li'）。removeClass（'open'）；
元素。同级（'li'）。查找（'ul'）。slideUp（）；
}
});
$（'#cssmenu>ul>li.has sub>a'）。追加（'''）；
（函数getColor（）{
var r，g，b；
var textColor=$（'#cssmenu'）.css（'color'）；
textColor=textColor.slice（4）；
r=textColor.slice（0，textColor.indexOf（'，'）；
textColor=textColor.slice（textColor.indexOf（“”）+1）；
g=textColor.slice（0，textColor.indexOf（'，'）；
textColor=textColor.slice（textColor.indexOf（“”）+1）；
b=textColor.slice（0，textColor.indexOf（'））；
var l=rgbToHsl（r，g，b）；
如果（l>0.7）{
$（'cssmenu>ul>li>a'）.css（'text-shadow'，'0px-0px-rgba（0,0,0,35）'）；
$（'cssmenu>ul>li>a>span'）.css（'border-color'，'rgba（0,0,0,35）'）；
}
其他的
{
$（'cssmenu>ul>li>a'）.css（'text-shadow'，'0px-0rgba（255,255,255,35）'）；
$（'cssmenu>ul>li>a>span'）.css（'border-color'，'rgba（255,255,255,35）'）；
}
})();
函数rgbToHsl（r、g、b）{
r/=255，g/=255，b/=255；
var max=Math.max（r，g，b），min=Math.min（r，g，b）；
变量h，s，l=（最大+最小）/2；
如果（最大=最小）{
h=s=0；
}
否则{
var d=最大-最小值；
s=l>0.5？d/（2-最大-最小）：d/（最大+最小）；
开关（最大值）{
案例r:h=（g-b）/d+（g

因为函数仅在“mouseenter”事件上运行，如果使用“hover”，则函数将在“mouseenter”和“mouseleave”事件上启动：D

替换

    $('#cssmenu li.has-sub>a').mouseenter(function( event ){

与

关于延迟：jquery将为每个激发的事件保存动画，以立即停止您必须添加的元素上的所有其他动画：

.stop( true, true )

JSFIDDLE：

---

JSFIDDLE（CSS解决方案）：

使用jQuery

.mouseleave（）

或

.hover（）

函数。 例如：

$('#cssmenu .has-subs').hover(function() {
   //do something when mouse enters
}, function() {
   //do something when mouse leaves
});

查看了解更多信息

---

希望这能有所帮助。

嗨，我按照你的建议做了，效果很好，但现在我无法使用子菜单，你可以再次查看url。关于css唯一的解决方案如何？好的，我修复了js。。。我将发布这2个解决方案：DGreat感谢你现在我将阅读并找到更改，看看我遗漏了什么：）我可以稍后解释：D如果你愿意。。。请让我知道，如果您需要更多的解释这里在评论下一次它会更好地添加一个JSFIDLE。。。

$('#cssmenu .has-subs').hover(function() {
   //do something when mouse enters
}, function() {
   //do something when mouse leaves
});