Question

我尝试制作一个简单的css下拉菜单，但没有按预期工作。当我将指针悬停在＆＃34; menu1＆＃34;时，应该会出现下拉列表。fiddle的链接。此外，我对这段css代码感到有点沮丧（我认为这应该是代码，它会给我所需的输出，但为什么它不起作用）

#nav ul li:hover ul

但是，如果我用

替换它

#nav ul:hover ul

它有效但不如预期。

Answer 1

只需在代码中添加>，如下所示：

#nav ul li:hover ul

转变为：

#nav ul > li:hover ul

如果要创建子菜单，结构应如下所示：

<li><a href="#">parent-menu</a></li>
<li><a href="#">parent-dropdown-menu</a>
    <ul>
        <li>........</li> <!--child-->
    </ul>
</li>

请点击此处的小变化： DEMO

Answer 2

您需要将子菜单放在父li：

中

<div id="nav">
    <ul>
        <li><a href="">menu0</a></li>
        <li class="main">
            <a href="">menu1</a>
            <ul>
                <li class="sub"><a href="">menu2</a></li>
            </ul>
        </li>
    </ul>
</div>

http://jsfiddle.net/F3Qg3/39/

纯CSS下拉列表无法正常工作

2 个答案: