仅使用CSS实现的悬停列表

Question

我在CSS滑动菜单方面遇到了一些问题。

我看过很多教程，但是有很多不必要的代码，而且我很难区分哪些是必需的代码，哪些只是其他CSS。

我想要一个仅使用CSS的悬停菜单，因为我正在工作的网站有很多用户故意禁用脚本（JavaScript）。

我不明白，在CSS中，当用户悬停在父列表项上时，如何使“子菜单”出现在其父列表项下方。 请问有人可以帮助我理解CSS中这是如何实现的吗？

以下是我所指的图像：

- Arrow

Answer 1

以下基本形式可以正常工作，但样式可以根据自己的喜好进行调整（位置、边框、颜色等）：

<ul>
    <li>Simple List item
        <ul>
            <li>sub menu item 1</li>
            <li>sub menu item 2</li>
            <li>sub menu item 3</li>
       </ul>
    </li>
</ul>

使用以下CSS：

ul li {
    position: relative;
}

ul ul {
    position: absolute;
    top: 1em;
    left: 0;
    display: none;
}

ul > li:hover ul {
    display: block;
}

JS Fiddle演示。

- David Thomas

---

谢谢。实际上，当鼠标悬停时，它确实会显示和隐藏。但是，无论我设置什么顶部或左侧，或者我设置什么位置，"sub"菜单项只出现在页面的最左上角（实际菜单位于页面右侧并向下一点）。 - Arrow

我是不是眼花了，还是你回答中的某些代码消失了？ - Arrow

谢谢@MiljanPuzović和David Thomas的帮助 - 它正如我所希望的那样工作。终于能够理解它是如何完成的，感到非常高兴！ :-) - Arrow

是的，问题在于我忘记在父级li上设置position: relative;；position: absolute元素相对于第一个具有非static定位的祖先元素（我想），否则相对于body元素定位。 - David Thomas