CSS下拉菜单:悬停状态似乎不起作用

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。

Answer 2

试试这个html，把ul放在li里面，这样它就可以作为它的子级工作了。

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

小提琴