hover main-menu-link时sub-menu显示失效问题求助

问题根源 #

你的CSS选择器写错了。.main-menu-link:hover .sub-menu 是在寻找.main-menu-link内部的子元素.sub-menu，但实际HTML里，.sub-menu和.main-menu-link是同级关系（都在同一个<li>标签里），所以这个选择器根本找不到目标元素，自然无法触发显示。

另外你的HTML存在标签未闭合的小问题：第一个子菜单的<li>没写</li>，会导致页面结构混乱，记得补上。

修复方案 #

推荐两种可行的修复方式：

方式1：给父级<li>加类，hover父级时显示子菜单（推荐） #

这种方式体验更稳定，鼠标移到子菜单区域时也不会消失：

1. 给包含链接和子菜单的<li>添加类名，比如has-submenu：

<li class="has-submenu">
  <a class="main-menu-link" href="#">Facilities & processing</a>
  <ul class="sub-menu">
    <li><a class="sub-menu-link" href="#facilities">Facilities</a></li>
    <li><a class="sub-menu-link" href="#processing">Processing </a></li>
  </ul>
</li>

2. 修改CSS选择器：

.has-submenu:hover .sub-menu {
  display: block;
}

方式2：使用相邻兄弟选择器（仅hover链接时显示） #

如果只想hover链接时显示子菜单，可以用相邻兄弟选择器+，但这种方式鼠标从链接移到子菜单的瞬间，子菜单会消失，体验较差：

.main-menu-link:hover + .sub-menu {
  display: block;
}

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