使下拉停留在 :悬停后不再处于活动状态

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>