html - 在父项悬停时显示子项而不是在父项或子项悬停时显示

Question

我创建了一个简单的下拉菜单，当我将鼠标悬停在父列表项“服务”上时，该菜单会缩放并淡入。一切正常，除了当我将鼠标悬停在子元素(下拉菜单)上时它也会出现。我知道简单地用不透明度隐藏它不会阻止用户将鼠标悬停在它上面，但它允许 0.4s 过渡生效。如果我用 display:none 或 visibility:hidden 隐藏它，转换会立即发生。我正在考虑使用 jQuery 来解决这个问题，但想知道是否有完全基于 CSS 的解决方案。

JSFiddle

* {
  margin: 0;
  padding: 0;
  font-family: Montserrat;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

nav {
  background-color: white;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

nav > ul > li {
  display: inline-block;
  position: relative;
  height: 60px;
  cursor: pointer;
}

nav a {
  color: rgba(165,175,185,1);
}

nav > ul > li > a {
  padding: 0 20px;
  height: 100%;
  line-height: 60px;
}

nav > ul > li:hover > a {
  color: rgba(105,115,125,1);
}

nav > ul > li:first-of-type {
  margin-right: auto;
}

.services-list-container {
  position: absolute;
  width: 200px;
  top: 100%;
  height: auto;
  opacity: 0;
  transform: rotateX(-20deg) scale(0.9,0.9);
	transform-origin: 0 0;
	transition: transform 0.4s ease, opacity 0.4s ease;
}

.services-list-container ul {
  background-color: white;
  box-shadow: 0 6px 16px rgba(40, 40, 90, 0.15);
  position: relative;
  margin-top: 30px;
}

.services-list-container a {
  padding: 20px;
  display: block;
}

.services-list-container a:hover {
  padding: 20px;
  display: block;
  background-color: rgba(235,240,245,1);
}
  
.hover:hover .services-list-container {
  transform: rotateX(0deg) scale(1,1);
	opacity: 1;
	transition: transform 0.4s ease, opacity 0.4s ease;
}

<nav>
  <ul>
    <li>
      <a href="#">[Logo]</a>
    </li>
    <li>
      <a href="#">About</a>
    </li>
    <li class="hover">
      <a href="#">Services</a>
      <div class="services-list-container">
        <ul>
          <li>
            <a href="#">Information</a>
          </li>
          <li>
            <a href="#">Technology</a>
          </li>
          <li>
            <a href="#">Training</a>
          </li>
          <li>
            <a href="#">Project Support</a>
          </li>
        </ul>
      </div>
    </li>
    <li>
      <a href="#">News</a>
    </li>
    <li>
      <a href="#">Jobs</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
  </ul>
</nav>

Answer 1

这并不是说您将鼠标悬停在子元素上，而是您的列表元素从 height:60px 开始变得如此之高，以至于当您将鼠标悬停在单词下方时，它仍然会越过 li 元素。