仅限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小提琴演示.