Html 如何使第二层导航显示在悬停状态？

我有一个导航栏，包括我的主页、菜单和照片库。在实际的物理菜单中，我有5个页面，由不同的菜单项组成，当我将鼠标悬停在菜单上时，我希望有一个包含所有这些页面的下拉列表<代码>显示：块将不工作。有什么解决办法吗

我的HTML：

<nav> <!-- Navigation -->
    <hr>
    <a href="Big Duck.html">Home</a>        
    <a class="MenuDropdown">Menu</a>
    <a href="Photogallery.html">Photogallery</a>

        <div class="DropdownButtons"> <!-- Dropdown navigation -->
            <a href="MulticourseMeals">Multicourse Meals</a>
            <a href="Appetizers">Appetizers</a>
            <a href="Soups">Soups</a>
            <a href="Entrees">Entrees</a>
            <a href="SidePlates">Side Plates</a>
            <a href="Desserts">Desserts</a>
        </div>

</nav>  

---

这是因为您当前使用的css选择假定菜单是链接的子菜单。您要查找的是通用同级选择器

.MenuDropdown:hover ~ .DropdownButtons

您还应该将css规则应用于

。下拉按钮：悬停

，以便菜单对用户保持打开状态。下面是一个工作片段

。下拉按钮{
显示：无；/*隐藏五页按钮菜单*/
文本对齐：居中；
宽度：100vw；
边际：0px；
填充：.2%0%。2%0%；
过渡：0.3s；
位置：固定；
最高：5.7%；
背景色：hsla（9,57%，60%，1）；
}
.下拉按钮a{
字体系列：“Didact哥特式”，无衬线；
字体大小：170%；
颜色：hsla（48,70,63,1）；
文字装饰：无；
利润率：0.5%0.5%；
填充：.2%、5%、2%、5%；
过渡：0.3s；
}
.MenuDropdown:hover~.DropdownButtons、.DropdownButtons:hover{
显示：block；/*显示5页按钮菜单*/
}

这是因为您当前使用的css选择假定菜单是链接的子菜单。您要查找的是通用同级选择器

.MenuDropdown:hover ~ .DropdownButtons

您还应该将css规则应用于

。下拉按钮：悬停

，以便菜单对用户保持打开状态。下面是一个工作片段

。下拉按钮{
显示：无；/*隐藏五页按钮菜单*/
文本对齐：居中；
宽度：100vw；
边际：0px；
填充：.2%0%。2%0%；
过渡：0.3s；
位置：固定；
最高：5.7%；
背景色：hsla（9,57%，60%，1）；
}
.下拉按钮a{
字体系列：“Didact哥特式”，无衬线；
字体大小：170%；
颜色：hsla（48,70,63,1）；
文字装饰：无；
利润率：0.5%0.5%；
填充：.2%、5%、2%、5%；
过渡：0.3s；
}
.MenuDropdown:hover~.DropdownButtons、.DropdownButtons:hover{
显示：block；/*显示5页按钮菜单*/
}

要实现这一效果，只需在另一个div中插入一个div，并显示：none；这样，第二个div将保持隐藏。然后，当父对象在鼠标下时，可以使用div:hover div选择此div，并使用display:block将其设置为显示

通常，您可以使用无序列表标记菜单项。我使用flex布局为您制作了一个菜单栏：

HTML:

---

您可以在此处看到以下代码：

要实现此效果，只需在另一个div中插入一个div，并显示：none；这样，第二个div将保持隐藏。然后，当父对象在鼠标下时，可以使用div:hover div选择此div，并使用display:block将其设置为显示

通常，您可以使用无序列表标记菜单项。我使用flex布局为您制作了一个菜单栏：

HTML:

---

您可以在此处看到此代码：

Yep！这很有效，谢谢！不过，我有一个错误，就是转换代码在它出现/消失的时间内不起作用。对此有任何修正吗？您不能设置“无显示”和“块显示”的动画。你需要一些js来强制回流。这里有一篇文章介绍了这一点。是的！这很有效，谢谢！不过，我有一个错误，就是转换代码在它出现/消失的时间内不起作用。对此有任何修正吗？您不能设置“无显示”和“块显示”的动画。你需要一些js来强制回流。这里有一篇文章介绍了这一点。

<nav id="navigator">
  <ul>
    <li><a href="Big Duck.html">Home</a></li>
    <li><a class="MenuDropdown">Menu</a></li>
    <li>
      <a>Dropdown</a>
      <ul>
        <li><a href="Drop">Home 2</a></li>
        <li><a href="Down">Menu 2</a></li>
      </ul>
    </li>
  </ul>
</nav>

#navigator ul {
  background-color: white;
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}
#navigator li {
  display: flex-item;
}
#navigator a {
  padding: 20px 20px;
  display: block;
  text-decoration: none;
  color: black;
}
#navigator a:hover {
  background-color: tomato;
  color: white;
  cursor: pointer;
}
#navigator ul ul {
  display: none; /*hide the dropdown here...*/
  position: absolute;
  flex-direction: column;
}
#navigator li:hover ul {
  display: flex; /*and show it here!*/
}