导航栏下拉菜单悬停间隙问题：绝对定位伪元素如何继承父元素auto宽度？

方法一：利用伪元素覆盖间隙 #

给父元素<li>和<a>添加相对定位，通过伪元素延伸<a>的可hover区域，覆盖间隙：

/* 给li设置相对定位，确保下拉菜单的定位基准 */
li {
  position: relative;
}

/* 给a设置相对定位，让伪元素以a为基准 */
li a {
  position: relative;
}

/* 伪元素覆盖a和下拉菜单之间的间隙 */
li a::after {
  content: "";
  position: absolute;
  top: 100%; /* 紧贴a的底部 */
  left: 0;
  right: 0; /* 自动匹配a的宽度，适配不同长度的关键词 */
  height: 30px; /* 高度设为间隙的实际高度，确保完全覆盖 */
  /* background-color: #56FD65; 调试时打开，确认伪元素范围，完成后可删除 */
}

/* 保持hover li时显示下拉菜单的原有逻辑 */
li:hover > div {
  display: block;
}

原理 #

• 绝对定位的伪元素通过left:0和right:0自动继承<a>的宽度，不用手动设置固定值或inherit，完美适配不同长度的关键词。
• 伪元素覆盖了<a>和下拉菜单之间的间隙，鼠标从<a>拖动到菜单时，会经过伪元素，始终保持<li>的hover状态，不会导致菜单消失。

方法二：调整li的内边距（更简洁） #

直接把间隙转化为<li>的内边距，让鼠标移到间隙区域时仍处于<li>的hover范围内：

li {
  position: relative;
  padding-bottom: 30px; /* 数值等于间隙的高度，将间隙变为li的内边距 */
}

/* 下拉菜单改为绝对定位，紧贴li的底部 */
li > div {
  position: absolute;
  top: 100%;
  left: 0;
  /* 原有菜单样式 */
}

li:hover > div {
  display: block;
}

原理 #

• <li>的padding-bottom会扩大它的可hover区域，原来的间隙变成了li的内边距，鼠标移到这里时仍触发li的hover状态。
• 下拉菜单通过position:absolute和top:100%定位在li的底部，消除了原本的间隙。

以上两种方法都不需要修改原有导航栏的HTML结构，也不用单独给每个关键词设置宽度，完美适配不同长度的元素。

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