使用jquery在hover/mouseout上显示/隐藏下拉菜单

Question

所以我有一个简单的导航栏,下拉菜单用于当用户在更多选项卡上悬停时.我想隐藏下拉菜单当用户将鼠标移出类别div时.

问题是,当用户将鼠标移入ul li时,下拉菜单将关闭.我如何设置它,以便该函数忽略类别div中的ul li.尝试过类别>*但没有用.

<div id="navbar">
  <ul>
    <li>tab1</li>
    <li>tab2</li>
    <li id="moretab">more</li>
  </ul>
</div> 
<div id="categories">
  <ul>
    <li>cats</li>
    <li>dogs</li>
  </ul>
</div>

$("#moretab").hover(function(){
  $("#categories").css("visibility","visible"); 
});
$("#categories").mouseout(function() {
    $("#categories").css("visibility","hidden"); 
});

Answer 1

$(document).ready(function () {

  $("#moretab").mouseenter(function(){
    $("#categories").show(); 
  });

  $("#categories, #moretab").mouseleave(function(){
    $("#categories").hide(); 
  });
});

Answer 2

最简单的答案是如何在没有jQuery的情况下执行此操作:将下拉列表放在触发元素中(例如导航列表中列表项中的下拉列表).

如果你想要一些不太直接的东西,mouseleave可能会有所帮助.