Question

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

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

Answer 1

您的代码：

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

表示“在悬停的li显示中创建任何ul：阻止”。你的子菜单不在LI中，它在它之后。你正在尝试做的Here's a working version。

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

Answer 2

另外

nav ul ul {
   display:none;
}

应该是

nav ul li ul {
display:none;
}

Answer 3

试试这个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>

Answer 4

你有两种改变方法;您可以更新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/提供了绝佳的资源。

导航菜单不会扩展

4 个答案: