jquery下拉简单问题？

Question

我快到了，但我无法解决最后一个问题。 我正在尝试在 Indexhibit 页面上使用 jquery 创建一个简单的下拉菜单。

    $('#menu ul li.section-title').hover(
  function () {  
    $(this).parent().children().show('fast');
  },
  function () {
    $(this).parent().children().not(this).hide('fast');
  }
);

菜单的结构如下所示：

<ul>
<li class="section-title">HEADER which triggers dropdown</li>
<li>element one</li>
<li>element two</li>
<li>element three</li>
</ul>

我希望部分标题触发悬停事件，并且它应该显示所有 li-children。到目前为止效果很好。然而，导航不太工作，因为我无法选择 li-child。每次将鼠标悬停在章节标题上时，整个 ul 结构都会再次崩溃。如果我将鼠标悬停在菜单的每个子项上，我需要做什么才能不触发悬停？

我希望我没有写得令人困惑。 问候马特

Answer 1

捕获 UL 的 Hover 事件，然后确保将 Overflow:hidden 样式应用于外部 UL。或者

<ul><h2>section-title<h2>
    <li>element one</li>
    <li>element two</li>
    <li>element three</li>
</ul>

#menu ul li { display:none }

#menu ul { 
    overflow:hidden
    position:absolute or float:left  <-- Might need this
}

$('#menu ul').hover(
  function () {  
    $(this).children("li").show('fast');
  },
  function () {
    $(this).children("li").hide('fast');
  }
);