jQuery下拉菜单不起作用

Question

我正在尝试制作一个具有设置功能的网站，并且我有这个按钮。我希望选项和其他链接在悬停时出现在下拉菜单中。我有我认为应该可以工作的代码，但由于某种原因它不能工作。

JSFiddle Here

Javascript 、CSS 和 HTML：-

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

#settings {
  width: 40px;
  background-image: url(http://cdn.flaticon.com/png/256/23171.png);
  background-repeat: no-repeat;
  background-size: 40px 40px;
  background-color: #F0F0F0;
  bottom: 0px;
  position: relative;
  height: 30px;
  background-position: center;
  float:left;
}

#settingDrop {
  position: absolute;
  width: 200px;
  height: 300px;
  background-color: #F0F0F0;
  float:left;
  top:55px;
  visibility: hidden;
}
.navbar {
  margin-left:
    width: 170px;
  padding: 10px 5px 10px 5px;
  text-align: center;
  display: inline-block;
  margin-right: 30px;
  height: 30px;
}

<div id = 'settings' class='navbar'></div>
<div id = 'settingDrop'></div>

Answer 1

visibility 有错字。

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

作为一个注释和更短的代码，使用 CSS display:none 和 jQuery show(milliseconds) 和 hide(milliseconds) 更快，您甚至可以使用时间为它制作动画，如下所示：

$(document).ready(function(){

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

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

});

与fadeIn(milliseconds) 和fadeOut(milliseconds) 相同

并将visibility:hidden 更改为display:none。

* 编辑 *

这是为了让菜单在几秒钟后消失（在这种情况下 2, 2000 以毫秒为单位）：

$(document).ready(function(){

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

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

});

这是更新后的小提琴：http://jsfiddle.net/xp4rfLbL/2/