如何让我的第二层导航出现在悬停时？

Question

我有一个导航栏，包括我的主页、菜单和照片库。在实际的物理菜单中，我有 5 个包含不同菜单项的页面，当我将鼠标悬停在 Menu 上时，我希望有一个包含所有这些页面的下拉菜单。 display: block; 当我将鼠标悬停在菜单按钮上时将无法运行。有什么解决办法吗？

我的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:

.DropdownButtons {
    display: none; /* To hide the five page button menu */

    text-align: center;
    width: 100vw;

    margin: 0px;
    padding: .2% 0% .2% 0%;

    transition: 0.3s;

    position: fixed;
    top: 5.7%;
    background-color: hsla(9 , 57%, 60%, 1);
}

.DropdownButtons a {
    font-family: 'Didact Gothic', sans-serif;
    font-size: 170%;
    color: hsla(48, 70%, 63%, 1);
    text-decoration: none;

    margin: 0% .5% 0% .5%;
    padding: .2% .5% .2% .5%;

    transition: 0.3s;
}

.MenuDropdown:hover .DropdownButtons {
    display: block; /* To show the 5 page button menu */
}

Answer 1

那是因为您当前使用的 css 选择假设菜单是 link 的子菜单。您要查找的是通用兄弟选择器

.MenuDropdown:hover ~ .DropdownButtons

您还应该将 css 规则应用于 .DropdownButtons:hover，以便菜单对用户保持打开状态。下面是一个工作片段

.DropdownButtons {
    display: none; /* To hide the five page button menu */

    text-align: center;
    width: 100vw;

    margin: 0px;
    padding: .2% 0% .2% 0%;

    transition: 0.3s;

    position: fixed;
    top: 5.7%;
    background-color: hsla(9 , 57%, 60%, 1);
}

.DropdownButtons a {
    font-family: 'Didact Gothic', sans-serif;
    font-size: 170%;
    color: hsla(48, 70%, 63%, 1);
    text-decoration: none;

    margin: 0% .5% 0% .5%;
    padding: .2% .5% .2% .5%;

    transition: 0.3s;
}

.MenuDropdown:hover ~ .DropdownButtons, .DropdownButtons:hover  {
    display: block; /* To show the 5 page button menu */
}

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

Answer 2

要达到这个效果，你只需要在另一个里面有一个 div 和 display: none;这样第二个 div 将保持隐藏状态。然后你可以 select 这个 div 当父级在鼠标下时使用 div:hover div 并将其设置为显示使用显示：块。

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

HTML:

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

CSS:

#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!*/
}

您可以在此处查看此代码：https://jsfiddle.net/x93ojma8/

如何让我的第二层导航出现在悬停时？

How can I make my 2nd tier navigation appear on hover?

html

css

navigation

hover