触发Mega Menu的Products菜单项点击子页面后未高亮，CSS类无效求助

• 核心原因：主题或菜单插件默认通过当前页面URL与菜单项URL完全匹配来触发激活状态。你点击的是Mega Menu内的子页面，URL和Products菜单项的URL不一致，所以父项不会自动显示橙色激活状态，仅添加megpro类无法解决——得让这个类在子页面加载时自动绑定到Products菜单项上。

具体解决步骤： #

1. 确认激活类规则
   先查看主题默认的激活类（比如current-menu-item、active），别只依赖自定义的megpro。打开浏览器控制台，查看正常激活的菜单项带的类名，后续逻辑里同步使用这个类。

2. 用JS自动添加激活类
   在子页面的JS中添加逻辑，检测当前页面属于Products子项时，给父菜单项绑定激活类：

   document.addEventListener('DOMContentLoaded', function() {
     // 通过href定位Products菜单项，也可以用菜单项专属ID定位
     const productsItem = document.querySelector('a[href="https://digitalcloud.co.za/2ic/2ic-overview/"]').parentElement;
     // 检查当前页面路径是否包含Products子页面的特征标识
     if (window.location.pathname.includes('/2ic/')) {
       // 同时添加自定义类和主题默认激活类
       productsItem.classList.add('megpro', 'current-menu-item');
     }
   });
   

   提示：如果菜单项有专属ID（如menu-item-123），用document.getElementById('menu-item-123')定位更稳定。

3. 强化CSS样式优先级
   确保激活样式能覆盖主题默认样式，示例代码：

   /* 用更具体的选择器提升优先级，尽量避免使用!important */
   .main-navigation .megpro a,
   .main-navigation .current-menu-item a {
     color: orange;
     /* 可选：补充背景色、边框等激活样式 */
   }
   

   若样式仍不生效，可临时添加!important排查，但优先通过具体选择器解决优先级问题。

4. 检查Mega Menu插件设置（若使用插件）
   如果你用的是Max Mega Menu这类专业插件，直接去插件后台找到子页面激活时高亮父菜单项的开关，开启后即可自动生效，无需编写代码。

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