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/

Answer 2

试试这个：

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

并且知道它是否有效

Answer 3

你在哪里

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

在你的CSS中

，试试

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

a:hover和ul.sub之间的“+”指定您要选择<a>的{{3}}。我认为这是更可取的，因为它更具体地说明了您选择的元素。

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

3 个答案: