使用GeneratePress添加megamenu CSS后子菜单无法点击该如何修复？

以下是按优先级排列的排查修复步骤：

• 检查自定义CSS的pointer-events配置
  这是最常见的问题原因，如果你修改官方CSS时误给.mega-menu或其下属的.sub-menu元素添加了pointer-events: none规则，会直接导致整个子菜单无法接收点击事件。你可以在你的自定义CSS中添加如下规则修复：

  .mega-menu .sub-menu {
      pointer-events: auto !important;
  }
  

• 核对菜单CSS类绑定配置
  官方教程要求仅给顶级菜单项添加mega-menuCSS类，如果你给子菜单项也添加了该类、或是类名拼写错误（比如漏写横杠写成megamenu），都会导致布局错位、点击区域偏移。
• 调整子菜单z-index层级
  子菜单如果被header、页面首屏内容等其他元素遮挡，也会出现看起来显示正常但无法点击的情况，添加如下CSS规则提升子菜单层级即可：

  .mega-menu .sub-menu {
      z-index: 9999 !important;
      position: relative;
  }
  

• 验证CSS选择器匹配度
  官方提供的CSS是适配GeneratePress默认菜单结构的，如果你安装了其他菜单自定义插件、或是自行修改过菜单的HTML结构，会导致CSS选择器匹配失败，布局异常进而影响点击。你可以先临时删除所有自定义的巨无霸菜单CSS，确认子菜单点击恢复正常后，再对照官方默认CSS逐行核对你修改的部分。

内容的提问来源于stack exchange，提问作者Jeffrey Jade Portillo