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选择是假设菜单是链接的子级。您正在寻找的是通用的兄弟选择器

.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内放置一个div，并使用 display：none ;；这样，第二个div将保持隐藏状态。然后，您可以使用 div：hover div 在父项位于鼠标下方时选择此div，并使用 display：block 设置为显示。

通常，您可以使用无序列表标记菜单项。我使用弹性版面为您制作了一个菜单栏：

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/

如何使第二层导航显示在悬停上？

2 个答案: