jquery - Accordion 风格多层列表菜单

Question

我环顾四周，还没有找到解决这个问题的办法。我有一个带有这样标记的列表菜单

<div id="menu">
  <ul>
    <li>Category #1
      <ul>
        <li>Item #1</li>
        <li>Item #2</li>
        <li>Item #3</li>
      </ul>
    </li>
    <li>Category #2
      <ul>
        <li>Item #1</li>
        <li>Item #2</li>
        <li>Item #3</li>
      </ul>
    </li>
    <li>Category #3
      <ul>

        <li>Item #1</li>
        <li>Item #2</li>
        <li>Item #3</li>
      </ul>
    </li>
    <li>Category #4
      <ul>
        <li>Item #1</li>
        <li>Item #2</li>
        <li>Item #3</li>
      </ul>
    </li>
  </ul>
</div>

我想做的是使菜单完全水平，当您将鼠标悬停在一个类别上时，它会滑出它旁边的元素。此处的视觉示例

它是建立在结构化列表上的，这一点非常重要，据我所知，到目前为止，我检查过的 Accordion 都不支持此功能。有什么想法吗？

Answer 1

精简版元素中是否有链接？如果是这样，你可以尝试这样的事情:

li ul {
    display:none;
}
li, ul, a {
    float:left;
    margin:0;
    padding:0;
    outline:1px solid;
}
li:hover ul {
    display:block;
}

这不包括“滑出”功能，但表明您可能需要在每个嵌套的 ul 之前围绕文本放置一个单独的元素。 (这里的整体样式当然只是概念证明，请随意跳过大纲，例如；)