Question

我尝试使用css和：hover状态创建一个下拉菜单，但当我将鼠标悬停在第一个<li>上时，子菜单不会下拉有人能帮助我吗？

这是我的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放在里面，所以它就像它的孩子一样。

<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>

fiddle

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

2 个答案: