html - CSS 下拉菜单 :hover state doesnt seem to work

Question

我尝试使用 css 和 :hover 状态制作下拉菜单，但是当我将鼠标悬停在第一个 <li> 上时，子菜单没有下拉。有人可以帮助我吗？

jsfiddle.net/mpo2fq5z

这是我的 html:

<div id="menu">
    <ul>
        <li>Menu</li>
        <ul>
            <li>Submenu</li>
            <li>Submenu</li>
            <li>Submenu</li>
        </ul>
        <li>Menu</li>
        <li>Menu</li>
    </ul>
</div>

以及随附的 CSS:

body {
    padding:0;
    margin:0;
    overflow-y:scroll;
    font-family:arial;
    font-size:18px;
    color:red;
}
#menu {
    background-color:#222;
}
#menu ul {
    list-style-type: none;
}
#menu ul li {
    display:inline-block;
    padding:15px;
}
#menu ul li:hover {
    background-color:black;
}
#menu ul li:hover ul {
    display:block;
}
#menu ul ul {
    display:none;
    position:absolute;
    background-color:#333;
    min-width:200px;
    margin-left: -15px;
    margin-top:15px;
    padding:0px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

Answer 1

问题是您的选择器说#menu ul li:hover ul。这表明您的子菜单位于

元素内，尽管它不是。要解决这个问题，只需将第二个插入

<li>Menu
    <ul>
        <li>Submenu</li>
        <li>Submenu</li>
        <li>Submenu</li>
    </ul>
</li>

我还使用正确的解决方案更新了您的 JsFiddle。