如何实现下拉内容Hover时保持可见且不修改父子元素间距

我想实现一个鼠标悬停父元素（Hover Me容器）时显示的下拉菜单，期望鼠标从父元素移至子元素时，子元素仍保持可见，但实际移动时子元素会消失。排查后发现，问题出在父子元素间的间距——鼠标移动时会离开父元素的hover范围，导致下拉菜单隐藏。请问：不修改该间距的前提下，如何实现鼠标从父元素移到子元素时子元素保持可见？

代码示例 #

HTML

<div class="dropdown">
    <div class="hover-me">Hover Me</div>
    <div class="dropdown-content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
      egestas ligula vel turpis imperdiet, eu volutpat turpis pharetra.
      Fusce in turpis mauris. Nunc quam nibh, tempor a arcu eu, imperdiet
      vulputate odio. Integer vel nisi in odio ultrices interdum luctus non
      dolor.
    </div>
</div>

CSS

.hover-me {
    width: fit-content;
    background-color: aqua;
    padding: 5px;
    border-radius: 5px;
}

.dropdown {
    display: inline-block;
    position: relative;
}

.dropdown-content {
    display: none;
    position: absolute;
    width: 250px;
    /* 保持与Hover Me容器的间距不变 */
    top: 40px;
    background-color: aqua;
    color: #000;
    border-radius: 5px;
    padding: 5px;
}

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

解决方案 #

方法1：用透明伪元素填充间距区域 #

给父元素.dropdown添加一个透明伪元素，覆盖hover-me和dropdown-content之间的空隙，让鼠标移动时不会离开父元素的hover范围：

.dropdown {
    display: inline-block;
    position: relative;
}

/* 添加伪元素覆盖间距 */
.dropdown::after {
    content: '';
    position: absolute;
    top: 100%; /* 从hover-me底部开始 */
    left: 0;
    width: 100%;
    height: 40px; /* 高度等于dropdown-content的top值，覆盖整个间距 */
    z-index: -1; /* 避免遮挡下拉菜单 */
}

伪元素是透明的，不会影响视觉效果，但会将父元素的hover区域延伸到下拉菜单，确保鼠标移动时不会中断hover状态。

方法2：调整下拉菜单定位，用透明边框填充间距 #

不修改视觉间距，而是让下拉菜单的可交互区域覆盖间距：

.dropdown-content {
    display: none;
    position: absolute;
    width: 250px;
    /* 调整top到hover-me底部，用透明border-top填充原间距 */
    top: calc(100% + 5px);
    border-top: 35px solid transparent; /* 35px + 5px = 40px，和原top值一致 */
    background-color: aqua;
    color: #000;
    border-radius: 5px;
    padding: 5px;
}

下拉菜单的实际可hover区域包含透明边框，鼠标移动时会穿过边框区域，保持父元素的hover状态，同时视觉上的间距和原效果完全一致。

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