Javascript jQuery下拉菜单不工作

我正在尝试创建一个带有设置功能的网站，我有这个按钮。我想选项和其他链接出现在一个下拉菜单时，悬停在。我有代码，我认为应该工作，但它不会工作的原因

Javascript、CSS和HTML：-

$（文档）.ready（函数（）{
$（“#设置”）.mouseenter（函数（）{
$（'#settingDrop'）.css（'visiblity'，'visible'）；
});
$（'#settingDrop，#settings'）.mouseleave（函数（）{
$（'#settingDrop'）.css（'visibility'，'hidden'）；
});
});
#设置{
宽度：40px；
背景图片：url(http://cdn.flaticon.com/png/256/23171.png);
背景重复：无重复；
背景尺寸：40px 40px；
背景色：#f0；
底部：0px；
位置：相对位置；
高度：30px；
背景位置：中心；
浮动：左；
}
#沉降液滴{
位置：绝对位置；
宽度：200px；
高度：300px；
背景色：#f0；
浮动：左；
顶部：55px；
可见性：隐藏；
}
navbar先生{
左边距：
宽度：170px；
填充：10px 5px 10px 5px；
文本对齐：居中；
显示：内联块；
右边距：30px；
高度：30px；
}
您的
可见性键入错误

$(document).ready(function(){
    $('#settings').mouseenter(function(){
       $('#settingDrop').css('visibility', 'visible'); 
    });
    $('#settingDrop, #settings').mouseleave(function(){
       $('#settingDrop').css('visibility', 'hidden'); 
    });
});

作为说明，对于较短的代码，使用CSS
display:none
和jQuery
show（毫秒）
和
hide（毫秒）
更快，您甚至可以使用时间为其设置动画，如下所示：

$(document).ready(function(){

    $('#settings').mouseenter(function(){
       $('#settingDrop').show(500); 
    });

    $('#settingDrop, #settings').mouseleave(function(){
        $('#settingDrop').hide(500); 
    });

});

与
fadeIn（毫秒）
和
fadeOut（毫秒）

并将
可见性：隐藏
更改为
显示：无

*编辑*

这是为了让菜单在几秒钟后消失（在本例中，22000以毫秒为单位）：

这是更新后的小提琴：
您发现了什么错误？什么也没有发生。我检查了我的Javascript，一切似乎都正常。下拉列表不出现是因为键入错误，在单击功能中应该是
visibility
，而不是
visibility
。Fiddle中修复：有些效果，但当我悬停在下拉菜单上时，不会停留。尽管如此，我还是觉得自己像个白痴……@Jasch1当光标移动时，你需要让下拉菜单在悬停时显示，在光标移动时隐藏，但当我将光标悬停在下拉菜单上时，下拉菜单不会停留。我还是觉得自己像个白痴……好吧，那你应该加一个计时器，让它在几秒钟后消失。我在换密码，等等。
$(document).ready(function(){

    $('#settings').click(function(){
       $('#settingDrop').fadeIn(500);
    });

    $('#settingDrop, #settings').mouseleave(function(){
        var time = setInterval(function(){
            $('#settingDrop').fadeOut(500);
            clearInterval(time);
        }, 2000);            
    });

});