0

当用户将鼠标悬停在菜单上时，我试图让下拉菜单出现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我将鼠标悬停在 About 上时，ul 未显示。我假设我在最后两条规则上犯了错误，但我无法解决。

4

3 回答 3

2

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

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

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

于 2013-04-18T14:03:47.543 回答
0

尝试这个：

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

让我知道它是否有效

于 2013-04-18T14:05:04.417 回答
0

你在哪里

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

在你的 CSS 中，尝试

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

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

于 2013-04-18T14:07:40.293 回答