1

我有一个垂直导航菜单，我想在悬停某些元素时显示不同级别的菜单。问题是我使用的方法不起作用，我不明白为什么。当我将鼠标悬停在“产品”上时，我希望看到一个子菜单展开，但没有任何反应。为什么？

HTML：

<nav>
<ul>
<li><a href="./index.html">Home</a></li>
<li><a href="./about.html">About</a></li>
<li><a href="./product.html">Product</a></li>
       <ul>
       <li><a href="#">Blueberries</a></li>
       <li><a href="#">Rasberries</a></li>
       <li><a href="#">Strawberries</a></li>
       </ul>
<li><a href="./contact.html">Contact</a></li>
</ul>
</nav>

CSS：

nav {
border:1px solid red;
}
nav ul ul {
display:none;
}
nav ul li:hover > ul {
display:block;
}
4

4 回答 4

3

你的代码：

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

意思是“在悬停的 li 中显示任何 ul：块”。您的子菜单不在 LI 之内，它在它之后。 这是您尝试做的工作的工作版本。

工作 HTML：

<li><a href="./product.html">Product</a>
       <ul>
       <li><a href="#">Blueberries</a></li>
       <li><a href="#">Rasberries</a></li>
       <li><a href="#">Strawberries</a></li>
       </ul>
</li>

工作CSS：

nav ul li ul {
    display:none;
}
nav ul li:hover ul {
    display:block;
}
于 2013-06-02T19:10:16.223 回答
1

为你的 html 试试这个：

<nav>
<ul>
    <li><a href="./index.html">Home</a></li>
    <li><a href="./about.html">About</a></li>
    <li><a href="./product.html">Product</a>
        <ul>
            <li><a href="#">Blueberries</a></li>
            <li><a href="#">Rasberries</a></li>
            <li><a href="#">Strawberries</a></li>
        </ul>
    </li>
    <li><a href="./contact.html">Contact</a></li>
</ul>
</nav>
于 2013-06-02T19:21:17.653 回答
1

还

nav ul ul {
   display:none;
}

应该

nav ul li ul {
display:none;
}
于 2013-06-02T19:11:28.937 回答
0

您有两种方法可以改变这一点；您可以更新 HTML，也可以更新 CSS。

更改代码有利有弊，在真空中，我不能推荐一种方法而不是另一种方法。

在不更改 HTML 的情况下，您可以使 CSS 像这样工作：

nav ul li:hover + ul {
  display: block;
}

请注意，不是使用后代选择器，而是使用相邻选择器并将样式应用于紧跟悬停 LI 的元素。

或者，上面提到的 HTML 更改也同样有效。

这个链接http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/提供了一个很棒的资源。

于 2013-06-02T19:19:27.977 回答