html - 仅在 CSS 中的悬停列表

Question

我在使用 CSS 翻转菜单时遇到了一些问题。

我看过很多，也有教程，但是有太多不必要的代码，我发现很难区分哪些是需要的代码，哪些是其他 CSS。

我只想在 CSS 上有一个悬停菜单，因为我正在处理的网站有很多用户故意禁用脚本（JavaScript）。

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

下面是我所指的图像：

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 小提琴演示。