Javascript 下拉Div在Hover jQuery上保持可见

我有一个下拉div（.drop-down），它有一个显示，但在另一个div（.nav-divs）悬停时向下滑动。我希望能够有。当我悬停在下拉列表上时，它保持可见，但当前它在悬停时闪烁得非常厉害。我确信有一个非常简单的解决方案，但我对jQuery还是相当陌生的。非常感谢您的帮助

这是一个

谢谢

HTML-

<div id='container'>
<a href=''><div class='nav-divs'>Home

</div></a>
<a href=''><div class='nav-divs'>Products
<div class='drop-down'><ul class="product-list">
    <a href=""><li>Phones</li></a>
    <a href=""><li>Computers</li></a>
    <a href=""><li>Software</li></a>
    <a href=""><li>Hardware</li></a>
</ul></div>
</div></a>
<a href=''><div class='nav-divs'>About

</div></a>
<a href=''><div class='nav-divs'>Contact

</div></a>

jQuery-

$('.nav-divs').mouseover(function(){
$(this).find('.drop-down').slideDown(300);

});

$('.nav-divs').mouseout(function(){
$(this).find('.drop-down').slideUp(100);

});

---

再次感谢

使用

mouseenter

和

mouseleave

jQuery事件：

$('.nav-divs').mouseenter(function () {
    $(this).find('.drop-down').slideDown(300);
});

$('.nav-divs').mouseleave(function () {
    $(this).find('.drop-down').slideUp(100);
});

---

为此，您不一定需要javascript。您还可以使用CSS使用类display:none和类：hover display:block/inline块等。然后，您可以合并webkit过渡和其他东西来平滑它

$('.nav-divs').mouseenter(function () {
    $(this).find('.drop-down').slideDown(300);
});

$('.nav-divs').mouseleave(function () {
    $(this).find('.drop-down').slideUp(100);
});