指针滚动时如何使下拉菜单保持悬停状态？答案

【问题标题】：How to make a dropdown stay on hover when pointer rolls in?指针滚动时如何使下拉菜单保持悬停状态？
【发布时间】：2020-09-27 22:25:59
【问题描述】：

为什么当我移开指针时下拉菜单会消失？感觉就像我没有将: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>

【问题讨论】：

标签： css drop-down-menu hover dropdown

【解决方案1】：

您遇到的问题是因为您悬停的链接和下拉菜单之间有一个空格。

您正在使用 :hover 在右侧元素上。在您的子 UL 和您的父链接之间有 2rem 的边距。这意味着在那个边缘，你在父母之外，在孩子之外。你需要让父母或孩子填补这个空白。在下面修改后的 sn-p 中，您会看到我将子 UL 中的上边距变成了填充。 padding 在 UL 内部，而 margin 在 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>

【讨论】：

哇，谢谢。我会考虑链接和下拉菜单之间的空间。我应该在导航的项目周围加上边框以便弄清楚吗？
好吧，您可以随时使用浏览器中的元素检查器来查看边框、填充和边距。我实际上不会将它们添加到 CSS 本身中。