Html 导航菜单赢得'；t扩展

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

HTML:

您的代码：

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

表示“在悬停的li显示器内制作任何ul:块”。您的子菜单不在LI中，它在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>

您的代码：

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

表示“在悬停的li显示器内制作任何ul:块”。您的子菜单不在LI中，它在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>

也

应该是

nav ul li ul {
display:none;
}

也

应该是

nav ul li ul {
display:none;
}

---

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

更改代码有其利弊，在真空中，我不能推荐一种方法胜过另一种方法

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

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

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

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

---

此链接提供了一个极好的资源。

您有两种方法可以更改此链接；您可以更新HTML，也可以更新CSS

更改代码有其利弊，在真空中，我不能推荐一种方法胜过另一种方法

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

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

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

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

---

此链接提供了一个极好的资源。

请在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>

为您的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>

-\u-，我可能应该暂时停止编码了。谢谢，伙计，这完全有道理。--，我可能应该暂时停止编码了。谢谢，伙计，这完全有道理。