html - 使用 CSS 的下拉菜单在悬停时不显示菜单

Question

当用户将鼠标悬停在 About 菜单上时，我试图让下拉菜单出现，请参阅 http://jsfiddle.net/bpAbC/

HTML:

<nav>
    <ul>
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">About</a>
            <ul class="sub">
                <li>One</li>
                <li>Two</li>
                <li>Three</li>
            </ul>
        </li>
        <li>
            <a href="#">Contact</a>
        </li>
    </ul>
</nav>

CSS:

nav > ul {
    margin: 0;
    padding: 0;
    display: table;
    width: 100%;
    height: 100%;
}

nav > ul > li {
    display: table-cell;
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

nav > ul > li a {
    color: red;
}

nav > ul > li > ul.sub {
    display: none;
}

nav > ul > li a:hover ul.sub {
    display: block;
}

当我将鼠标悬停在关于上时，.sub ul 没有显示。我假设我的最后两条规则有误，但我无法解决。

Answer 1

您需要将选择器更改为 nav > ul > li:hover ul.sub 因为 ul.sub 不是 a 的子级

nav > ul > li:hover ul.sub {
    display: block;
}

http://jsfiddle.net/bpAbC/1/