如何为WordPress站点添加可在header下方展开的子菜单导航

方案1：插件快速实现（新手推荐） #

• 登录WordPress后台，安装启用巨型菜单类插件（无需修改原有主题header代码，兼容90%以上主流主题）
• 进入「外观-菜单」设置，启用插件提供的「巨型菜单」功能，将需要展开的父菜单设置为全宽模式
• 按需求自定义展开区块的背景、布局、子项样式即可，无需手动编写代码

方案2：自定义CSS+JS改造现有菜单 #

第一步：给目标菜单项加自定义类 #

• 进入后台「外观-菜单」，点击右上角「显示选项」，勾选「CSS类」
• 找到需要实现全宽展开的父菜单项，给它添加自定义类名 fullwidth-menu-toggle 后保存

第二步：添加自定义CSS #

• 进入「外观-自定义-额外CSS」，粘贴以下代码，注意将100px替换为你当前站点的实际header高度：

/* 隐藏默认子菜单样式 */
.fullwidth-menu-toggle .sub-menu {
    display: none !important;
    position: absolute !important;
    top: 100px !important; /* 替换为你的header实际高度 */
    left: 0 !important;
    width: 100vw !important;
    background: #fff !important;
    padding: 20px 5vw !important;
    z-index: 999 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}
/* 激活状态显示子菜单 */
.fullwidth-menu-toggle.active .sub-menu {
    display: flex !important;
    gap: 30px;
    flex-wrap: wrap;
}

第三步：添加点击触发JS #

• 如果主题支持自定义JS，直接把代码粘贴到对应位置；如果没有对应功能，可安装插入页头页脚代码的插件，把代码粘贴到页脚代码框：

jQuery(document).ready(function($){
    $('.fullwidth-menu-toggle').click(function(e){
        e.preventDefault();
        $(this).toggleClass('active');
        // 点击其他区域关闭展开菜单
        $(document).click(function(event){
            if(!$(event.target).closest('.fullwidth-menu-toggle').length) {
                $('.fullwidth-menu-toggle').removeClass('active');
            }
        });
    });
});

方案3：钩子替换原有菜单输出（适合有开发基础的用户） #

如果主题自带菜单逻辑冲突严重，可通过wp_nav_menu_args钩子过滤原有菜单的输出参数，替换为自定义的菜单Walker类，自定义子菜单的输出结构，无需关闭原有header。

注意事项 #

• 所有代码修改后需要清空站点缓存、浏览器缓存才能看到效果
• 如果原有主题自带子菜单hover效果，可以在CSS里添加.sub-menu{pointer-events:none;}先禁用原有交互，再用自定义JS控制

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