WordPress：如何让子菜单覆盖下方内容且可正常点击链接？

要解决堆叠菜单下拉重叠、无法点击的问题，核心是通过CSS层级控制和定位调整确保下拉菜单覆盖下方内容，同时优化hover触发逻辑：

1. 核心CSS调整 #

/* 菜单父项设置相对定位，作为下拉菜单的定位基准 */
.menu-container {
  position: relative;
  /* 给父菜单设置基础层级，下拉菜单会继承并覆盖下方菜单 */
  z-index: 10;
  margin-bottom: 10px; /* 可选：给菜单间留间距，减少误触 */
}

/* 下拉菜单样式 */
.dropdown-menu {
  display: none;
  position: absolute; /* 脱离文档流，不占用下方菜单布局空间 */
  top: 100%; /* 下拉菜单紧贴父菜单底部 */
  left: 0;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  min-width: 220px;
  /* 设置足够高的层级，确保覆盖下方所有菜单 */
  z-index: 100;
  padding: 8px 0;
}

/* 悬停父菜单时显示下拉 */
.menu-container:hover .dropdown-menu {
  display: block;
}

/* 下拉菜单项样式，确保点击区域正常 */
.dropdown-menu li {
  list-style: none;
  padding: 6px 16px;
}

.dropdown-menu li a {
  text-decoration: none;
  color: #333;
  display: block; /* 让整个区域可点击 */
}

.dropdown-menu li:hover {
  background-color: #f5f5f5;
}

2. 额外优化建议 #

• 如果存在hover状态频繁切换的问题（比如鼠标从上方下拉移到下方菜单时，上方菜单关闭、下方菜单展开），可以给下拉菜单添加margin-top: -2px，消除下拉菜单与父菜单的间隙，避免鼠标移过间隙时触发状态改变。
• 若用JavaScript控制菜单显示，建议用mouseenter和mouseleave事件替代mouseover/mouseout，后者会因事件冒泡导致不必要的状态切换。
• 确保所有菜单父项都设置了position: relative，避免下拉菜单定位错乱。

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