Question

这是html代码：

<ul id="nav">
    <li class="level0 nav-1 first level-top parent">
        <a href="#" class="level-top"><span>level1a</span></a>
            <ul class="level0">
                <li class="level1 nav-1-1 first">
                    <a href="#"><span>level1b</span></a></li>
                <li class="level1 nav-1-2"><a href="#"><span>level1c</span></a></li>
                <li class="level1 nav-1-3"><a href="#"><span>level1d</span></a></li>
                </li>
            </ul>
    </li>
    <li class="level0 nav-2 level-top"><a href="#" class="level-top"><span>level2a</span></a></li>
    <li class="level0 nav-3 level-top"><a href="#" class="level-top"><span>level2b</span></a></li>
    <li class="level0 nav-4 level-top"><a href="#" class="level-top"><span>level2c</span></a></li>
    <li class="level0 nav-5 level-top"><a href="#" class="level-top"><span>level2d</span></a></li>
</ul>

当我将鼠标悬停在level1a上时，我想显示子菜单。我怎么能这样做？

css代码：

.main-menu ul li ul{display: none;}
.main-menu ul li:hover{/* that part I don't know */}

Answer 1

试试这个：

.main-menu ul li:hover ul{
display:block;
}

Answer 2

你可以尝试这个：

 .main-menu ul li:hover > ul{
        display:block;
    }

在子菜单问题上应用css

2 个答案: