如何实现触发元素与下拉项带间距且悬停不失效的Hover下拉菜单

问题场景 #

导航栏中的下拉菜单项需要和触发hover的元素之间设置间距，但当前存在两个问题：

• 设置dropdown-nav-content的top:85px实现间距后，鼠标移到空白区域时hover效果失效，下拉内容的链接无法点击；
• 给「Content 1」添加底部内边距会导致元素错位。

原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;
}

解决方案 #

方案1：用伪元素扩展hover触发区域 #

给.dropdown-nav添加一个透明伪元素，覆盖需要的间距区域，这样鼠标移到空白处时仍能保持hover状态，不会中断下拉菜单的显示。

修改后的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;
  // 添加透明伪元素，扩展hover触发范围
  &::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 20px; // 此处设置你需要的间距高度
  }
}

.dropdown-nav-content {
  flex-direction: column;
  display: none;
  position: absolute;
  background-color: white;
  width: 240px;
  z-index: 1;
  top: calc(100% + 20px); // 此处数值与伪元素高度保持一致
}

.dropdown-nav:hover .dropdown-nav-content {
  display: flex;
}

原理：伪元素是完全透明的，不会影响页面视觉，但会将.dropdown-nav的hover触发区域向下延伸，覆盖设置的间距空白区域，确保鼠标移动过程中hover状态不中断。

方案2：利用padding和背景裁剪实现视觉间距 #

将下拉容器与触发元素紧密贴合，通过给下拉容器添加顶部内边距，并限制背景仅在内容区域显示，实现视觉上的间距效果，同时保证hover状态不中断。

修改后的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: 100%; // 与触发元素紧密贴合
  padding-top: 20px; // 此处设置你需要的间距大小
  background-clip: content-box; // 背景仅在内容区域显示，padding区域透明
}

.dropdown-nav:hover .dropdown-nav-content {
  display: flex;
}

原理：下拉容器的顶部与触发元素无缝衔接，padding-top让下拉内容向下偏移形成视觉间距，background-clip: content-box确保padding区域无背景，看起来和空白间距一致。此时鼠标移到padding区域时，仍属于下拉容器的范围，hover状态不会中断，内容可正常点击。

内容的提问来源于stack exchange，提问作者Gabriel