当指针滚入时，如何使下拉菜单保持悬停状态？

Question

为什么当我将指针移开时下拉菜单消失了？感觉好像我没有将 :hover 应用于正确的元素，但我无法弄清楚。有没有办法快速找出 :hover 应该在哪里？

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  background-color: #fbb2c3;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  width: 45%;
}

.nav-links li {
  list-style: none;
  position: relative;
}

.nav-links a {
  text-decoration: none;
  letter-spacing: 0.5px;
  font-weight: bold;
}

.nav-links li ul {
  visibility: hidden;
  opacity: 0;
  min-width: 10rem;
  position: absolute;
  margin-top: 2rem;
  left: 0;
  display: none;
}

ul li:hover>ul,
ul li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}

<body>
  <nav>
    <ul class="nav-links">
      <li><a class="dropdown" href="#">portfolio</a>
        <ul class="dropdown-content">
          <li><a href="#">littérature</a></li>
          <li><a href="#">sous-titrage</a></li>
          <li><a href="#">web</a></li>
        </ul>
      </li>
      <li><a href="CV.html">parcours</a></li>
      <li><a href="Intro.html">profil</a></li>
      <li><a href="Contact.html">contact</a></li>
      <li><a href="Contact.html">carte de visite</a></li>
    </ul>
  </nav>
</body>

Answer 1

您遇到的问题是因为在您悬停的 link 和下拉菜单之间有一个 space。

您正在右侧元素上使用 :hover。在你的 child UL 和你的 parent link 之间有 2rem 的余量。这意味着在该边距中，您位于 parent 和 child 之外。您需要用 parent 或 child 填充该空白。在下面修改后的代码段中，您会看到我将 child UL 中的上边距变成了填充。填充在 UL 内部，而边距在 UL 外部。

我提出的解决方案并不是唯一可以解决此问题的解决方案，这取决于除此功能外您还试图实现的视觉效果。

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  background-color: #fbb2c3;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  /*width: 45%; Commented out because of how this shows in the SO iframe */
}

.nav-links li {
  list-style: none;
  position: relative;
}

.nav-links a {
  text-decoration: none;
  letter-spacing: 0.5px;
  font-weight: bold;

}

.nav-links li ul {
  visibility: hidden;
  opacity: 0;
  min-width: 10rem;
  position: absolute;
  padding-top: 2rem; /* PROPOSED SOLUTION */
  left: 0;
  display: none;
}

ul li:hover>ul,
ul li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}

<body>
  <nav>
    <ul class="nav-links">
      <li><a class="dropdown" href="#">portfolio</a>
        <ul class="dropdown-content">
          <li><a href="#">littérature</a></li>
          <li><a href="#">sous-titrage</a></li>
          <li><a href="#">web</a></li>
        </ul>
      </li>
      <li><a href="CV.html">parcours</a></li>
      <li><a href="Intro.html">profil</a></li>
      <li><a href="Contact.html">contact</a></li>
      <li><a href="Contact.html">carte de visite</a></li>
    </ul>
  </nav>
</body>

当指针滚入时，如何使下拉菜单保持悬停状态？

How to make a dropdown stay on hover when pointer rolls in?

css

hover

drop-down-menu

dropdown