html - 使下拉停留在:hover is no longer active之后

Question

我有一个带有下拉菜单的简单导航栏，当用户将鼠标悬停在导航栏中其受尊重的链接上时，该菜单应该保留，但在用户将鼠标悬停在实际下拉菜单而非其链接上后，我无法使其保留。我试过创建一个 :hover在实际下拉列表中具有所需显示值的类，但当鼠标从链接移动到下拉列表时似乎有一些空间，因此它在第二个之前再次变得不可见 :hover类有机会被应用。

.nav-link:hover {
  box-sizing: border-box;
  color: rgb(201, 49, 49);
  transition: 0.4s;
  border-bottom: 5px solid rgb(201, 49, 49);
  cursor: pointer;
}

.nav-dropdown {
  display: none;
  position: absolute;
  top: 75px;
}

.nav-link:active+.nav-dropdown {
  display: inherit;
  width: 12.5%;
  height: 200px;
  background-color: red;
}

.nav-dropdown:hover {
  display: block;
}

<div className="navbar">
  <div className="navbar-elements nav-link">Menu</div>
  <div className="nav-dropdown">Dropdown</div>
  <div className="navbar-elements nav-link">Events</div>
  <div className="navbar-elements nav-link">Reserve</div>
  <div className="navbar-elements">THE MINIMALIST</div>
  <div className="navbar-elements nav-link">Delivery</div>
  <div className="navbar-elements nav-link">About us</div>
  <div className="navbar-elements nav-link">Contacts</div>
</div>

如果可能的话，我真的更愿意只使用 HTML/CSS。有没有一种方法可以在不进行大量重构的情况下实现所需的行为？谢谢!

Answer 1

如果你使用普通的 HTML 而不是 class 而不是 className;

尝试将您的 .nav-dropdown 放在 .nav-link 中。

并通过定位 .nav-link:hover .nav-dropdown {} 添加悬停效果

.nav-dropdown {
  display: none;
  position: absolute;
  box-sizing: border-box;
  color: rgb(201, 49, 49);
  transition: 0.4s;
  border-bottom: 5px solid rgb(201, 49, 49);
  cursor: pointer;
}

.nav-link:hover .nav-dropdown {
  display: inherit;
  width: 12.5%;
  height: 200px;
  background-color: red;
}

<div class="navbar">
  <div class="navbar-elements nav-link">
    Menu
    <div class="nav-dropdown">Dropdown</div>
  </div>
  <div class="navbar-elements nav-link">Events</div>
  <div class="navbar-elements nav-link">Reserve</div>
  <div class="navbar-elements">THE MINIMALIST</div>
  <div class="navbar-elements nav-link">Delivery</div>
  <div class="navbar-elements nav-link">About us</div>
  <div class="navbar-elements nav-link">Contacts</div>
</div>