如何仅在网站首页使子菜单保持始终可见？

方法一：CSS + 页面专属类（推荐） #

• 先检查首页的<body>标签是否自带专属类（多数CMS会给首页body加home或index类，可通过浏览器F12开发者工具查看）。如果没有，给首页body手动添加一个类，比如home-page。
• 找到网站中子菜单的CSS选择器（比如.sub-menu或.dropdown-menu，用开发者工具查看元素获取），然后添加如下CSS规则：

/* 仅首页显示子菜单 */
.home-page .sub-menu {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

原理：通过首页专属类限定样式生效范围，只有首页的子菜单会被强制显示，其他页面保持原有逻辑。

方法二：JavaScript判断首页控制样式 #

如果无法给body加专属类，用JS判断当前页面是否为首页，再修改子菜单样式：

// 判断是否为首页（适配根路径或index.html两种常见首页URL）
if (window.location.pathname === '/' || window.location.pathname === '/index.html') {
  // 替换成你网站实际的子菜单选择器
  const subMenus = document.querySelectorAll('.sub-menu');
  subMenus.forEach(menu => {
    menu.style.display = 'block';
    menu.style.opacity = '1';
    menu.style.visibility = 'visible';
  });
}

注意：务必把.sub-menu替换成你网站真实的子菜单元素选择器。

操作提示 #

用浏览器开发者工具（F12）定位元素时，选中子菜单后，可直接查看它默认的隐藏属性（比如display: none），对应修改CSS或JS里的属性即可。

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