html - 在子菜单问题上应用CSS

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