隐藏css-made下拉菜单

Question

我已经用css创建了一个下拉菜单。下面是HTML代码：

<li class="menu" id="menu"> 
    <div class="dropdown">  
    <div class="col1"> ... 

这里是CSS：

.dropdown { 
    visibility:hidden; 
    /*...*/ 
} 

#menu li:hover .dropdown{ 
    visibility:visible; 
} 

这完美的作品。在jQuery中，我处理这个菜单中链接的click事件，并且我想用jQuery来隐藏下拉菜单，只要用户点击一个链接，它就会消失。 我想这两者（注：我没有用过这些结合在一起。）：

$('.dropdown').css('visibility', 'hidden'); //didn't work 

$('.dropdown').hide(); //didn't work either 

他们都隐藏菜单，但问题是，当他们隐藏它，每当我悬停我不要再拿到菜单将鼠标悬停在项目上。

Answer 1

好的，实际发生的情况是，当你在元素上设置$('.dropdown').css('visibility', 'hidden');时，它会将此内容添加到元素的样式属性，内联（可以使用Firebug检查此属性）。所以CSS

#menu li:hover .dropdown{ 
    visibility:visible; 
} 

没有任何作用，因为内联样式优先。 .dropdown现在将始终将元素设置为hidden。

Answer 2

您必须定义当鼠标悬停按钮时会发生什么，当鼠标悬停时会发生什么。事情是这样的：

jQuery(document).ready(function(){ 
    jQuery(".dropdown").hover(function() { 
     /* hovering actions */ 
    }, function() { 
     /* non-hovering functions */ 
    }); 
}); 

Answer 3

这是因为jQuery的隐藏（）方法使用规则“显示：无”在那elemenent，在这种情况下，“.dropdown”，将其隐藏，因此，根据定义，“知名度“不能在具有分配给它的规则”display：none“的元素上工作。

使用jQuery制作下拉效果而不是一堆CSS规则。