WordPress底部菜单下拉选项被上层内容覆盖，z-index设置无效如何修复？

问题根源 #

你遇到的问题有两个核心诱因：

1. 子菜单触发逻辑错误：你当前将:hover绑定到了默认隐藏在视口外的.sub-menu元素上，根本无法触发hover事件，子菜单无法正常弹出，很容易被误认为是被上层内容遮挡。
2. z-index配置不符合堆叠上下文规则：z-index仅对position属性非static的元素生效，且层级优先级受父元素的堆叠上下文限制，单独给子菜单设置z-index不会生效。

修复方案 #

以下是调整后的完整可用CSS，直接替换原有代码或者添加到WordPress后台「外观-自定义-额外CSS」的最底部即可：

/* 给底部菜单外层容器创建堆叠上下文，确保层级高于上层内容 */
/* 注：如果你的底部菜单外层类名不是.footer-menu-wrapper，替换为实际的外层类名即可 */
.footer-menu-wrapper {
    position: relative;
    z-index: 9999;
}

/* 给子菜单的父级菜单项设置相对定位，作为子菜单绝对定位的参照 */
.menu-footer-items > li {
    position: relative;
    z-index: 100;
}

.menu-footer-items ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (min-width: 43.75em) {
    /* 将hover触发绑定到父级菜单项，修正触发逻辑 */
    .menu-footer-items > li:hover .sub-menu {
        bottom: 24px;
        opacity: 1;
        -webkit-transform: translateX(-50%) scale(1);
        transform: translateX(-50%) scale(1);
        z-index: 10000;
    }

    .menu-footer-items .sub-menu {
        position: absolute;
        background: #1A1A1A;
        text-align: center;
        margin: 0;
        min-width: 100%;
        max-width: 220px;
        left: 50%;
        bottom: -9999px;
        opacity: 0;
        -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
        transition: opacity 0.3s ease, transform 0.3s ease;
        -webkit-transform: translateX(-50%) scale(0.95);
        transform: translateX(-50%) scale(0.95);
    }
}

异常排查 #

如果应用代码后问题仍存在，按以下步骤排查即可：

• 确认底部菜单外层容器的类名正确，也可以直接给外层容器添加行内样式position:relative;z-index:9999临时测试效果
• 检查页面主内容区、上层内容容器的z-index值，确保其低于底部菜单外层容器的z-index
• 清除WordPress站点缓存、浏览器缓存后刷新，避免旧样式残留

内容的提问来源于stack exchange，提问作者Rodrigo Corrêa