如何创建悬停下拉菜单，使悬停项目和下拉元素之间有空间，而不禁用悬停效果

Question

我的导航栏中有一个项目具有悬停效果，但悬停时出现的项目和悬停元素之间应该有间距。但是，如果我添加间距，悬停效果将在空白处禁用，因此无法单击下拉内容中的链接。如何修复此问题，使中间的空白区域保持悬停效果？

这是HTML:

<nav class="nav-header">
<div class="dropdown-nav">
<div class="icon-container">
<a class="navbar-text" href="">Content 1</a>
<img class="arrow" src="./arrow.png" alt="menu arrow" />
</div>
<div class="dropdown-nav-content">
<p>Content 1</p>
<p>Content 3</p>
<p>Content 3</p>
</div>
</div>
<a class="navbar-text" href="">Content 2</a>
<a class="navbar-text" href="">Content 3</a>
<a class="navbar-text" href="">Content 4</a>
<a class="navbar-text" href="">Content 5</a>
<a class="navbar-text" href="">Content 6</a>
</nav>

这是我的CSS/SCSS:

.nav-header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 130px;
padding-left: 100px;
padding-right: 100px;
.navbar-text {
color: #9f9f9f;
cursor: pointer;
text-decoration: none;
}
.icon-container {
display: flex;
justify-content: center;
align-items: center;
}
}
.dropdown-nav {
position: relative;
display: inline-block;
}
.dropdown-nav-content {
flex-direction: column;
display: none;
position: absolute;
background-color: white;
width: 240px;
z-index: 1;
top: 85px;
}
.dropdown-nav:hover .dropdown-nav-content {
display: flex;
}

下拉导航内容位于顶部：85px，使其在悬停的元素之间有间距，但它们之间的空白将取消覆盖；内容1"；它使元件偏离对准。

Answer 1

将其添加到css文件中。

.dropdown-nav-content::before {
display:block;
content:'';
height:20px;
}

CCD_ 1由您的浏览器"添加"；在"；元素：在这种情况下，在类为CCD_ 2的每个元素之前。

请注意，必须定义一个content属性，浏览器才能创建它。将内容设置为''以使其为空。

将height设置为您需要的。

希望得到帮助；(