如何用纯CSS实现三级悬停展开菜单？

能否用纯CSS实现二级菜单交互？ #

完全可以。核心靠CSS的:hover伪类结合元素显示/隐藏属性（比如display、visibility）就能实现你描述的交互效果。

实现思路与代码示例 #

假设你的二级菜单HTML结构大致如下：

<nav class="sidebar-menu">
  <ul class="main-menu">
    <li class="menu-item">
      <a href="#">菜单项1</a>
      <ul class="submenu">
        <li><a href="#">子菜单项1-1</a></li>
        <li><a href="#">子菜单项1-2</a></li>
      </ul>
    </li>
    <li class="menu-item">
      <a href="#">菜单项2</a>
      <ul class="submenu">
        <li><a href="#">子菜单项2-1</a></li>
      </ul>
    </li>
  </ul>
</nav>

对应的CSS实现：

/* 基础布局：左侧主菜单默认展开，子菜单隐藏 */
.sidebar-menu {
  width: 200px;
  background: #f5f5f5;
}

.main-menu .menu-item {
  position: relative;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

/* 子菜单默认隐藏 */
.main-menu .submenu {
  display: none;
  margin-left: 20px;
  background: #fff;
}

/* 主菜单项hover时显示子菜单 */
.main-menu .menu-item:hover .submenu {
  display: block;
}

/* 增强交互体验的样式 */
.menu-item a {
  text-decoration: none;
  color: #333;
}

.menu-item:hover {
  background: #e0e0e0;
}

如果要做左侧菜单默认折叠、hover容器才展开的效果，只需调整主菜单默认状态：

/* 默认主菜单折叠 */
.main-menu {
  display: none;
}

/* hover侧边栏容器时展开主菜单 */
.sidebar-menu:hover .main-menu {
  display: block;
}

第三级菜单的处理方法 #

思路和二级菜单完全一致，在子菜单项里继续嵌套第三级菜单结构，再通过:hover控制其显示即可：

扩展后的HTML结构 #

<nav class="sidebar-menu">
  <ul class="main-menu">
    <li class="menu-item">
      <a href="#">菜单项1</a>
      <ul class="submenu">
        <li class="submenu-item">
          <a href="#">子菜单项1-1</a>
          <ul class="third-level-menu">
            <li><a href="#">三级菜单项1-1-1</a></li>
            <li><a href="#">三级菜单项1-1-2</a></li>
          </ul>
        </li>
        <li><a href="#">子菜单项1-2</a></li>
      </ul>
    </li>
  </ul>
</nav>

对应的CSS补充 #

/* 第三级菜单默认隐藏 */
.submenu .third-level-menu {
  display: none;
  margin-left: 20px;
  background: #fafafa;
}

/* 子菜单项hover时显示第三级菜单 */
.submenu .submenu-item:hover .third-level-menu {
  display: block;
}

注意事项 #

• 层级较多时，建议用position: absolute定位子菜单，避免页面布局偏移，记得给父元素设置position: relative作为定位参考。
• 可以用visibility: hidden + opacity: 0 + transition替代display: none，实现平滑展开/收起的动画效果，提升交互体验。

内容的提问来源于stack exchange，提问作者Jesse Luke Orange