如何实现类似Udemy的分类hover触发展开菜单及子菜单的功能

核心逻辑基于嵌套DOM结构+CSS :hover 伪类实现，基础效果无需依赖JavaScript，按需加JS做交互优化即可。

1. 基础HTML结构 #

用嵌套的列表结构承载一级分类和二级子分类：

<!-- 顶部导航分类入口 -->
<div class="category-trigger">
  <span>全部分类</span>
  <!-- 一级菜单容器 -->
  <ul class="primary-menu">
    <li class="menu-item">
      <a href="#">开发编程</a>
      <!-- 二级子菜单 -->
      <div class="sub-menu">
        <div class="sub-column">
          <h4>前端开发</h4>
          <a href="#">HTML/CSS</a>
          <a href="#">JavaScript</a>
          <a href="#">React</a>
        </div>
        <div class="sub-column">
          <h4>后端开发</h4>
          <a href="#">Python</a>
          <a href="#">Java</a>
          <a href="#">Go</a>
        </div>
      </div>
    </li>
    <li class="menu-item">
      <a href="#">设计创意</a>
      <div class="sub-menu">
        <div class="sub-column">
          <h4>平面设计</h4>
          <a href="#">Photoshop</a>
          <a href="#">Illustrator</a>
        </div>
        <div class="sub-column">
          <h4>UI/UX设计</h4>
          <a href="#">Figma</a>
          <a href="#">交互设计</a>
        </div>
      </div>
    </li>
  </ul>
</div>

2. 核心CSS样式 #

通过定位控制菜单层级，:hover 伪类控制显隐：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.category-trigger {
  position: relative;
  padding: 12px 16px;
  cursor: pointer;
}
/* 默认隐藏一级菜单，hover触发按钮时显示 */
.primary-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 280px;
  background: #fff;
  border: 1px solid #e4e4e4;
  list-style: none;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  z-index: 999;
}
.category-trigger:hover .primary-menu {
  display: block;
}
.menu-item {
  position: relative;
  padding: 10px 16px;
}
.menu-item:hover {
  background: #f7f7f7;
}
/* 默认隐藏二级子菜单，hover一级菜单项时在右侧显示 */
.sub-menu {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 600px;
  min-height: 100%;
  background: #fff;
  border: 1px solid #e4e4e4;
  box-shadow: 2px 0 12px rgba(0,0,0,0.1);
  padding: 20px;
  gap: 48px;
  z-index: 999;
}
.menu-item:hover .sub-menu {
  display: flex;
}
.sub-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sub-column h4 {
  margin-bottom: 8px;
  color: #1c1c1c;
  font-size: 14px;
}
.sub-column a {
  color: #6a6f73;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.5;
}
.sub-column a:hover {
  color: #5624d0;
}

3. 可选交互优化 #

• 解决菜单闪动问题：用visibility+opacity+transition替代display控制显隐，添加100ms左右的过渡延迟，避免鼠标快速划过时频繁触发显隐
• 移动端适配：移动端无hover事件，可通过JS绑定点击事件切换active类控制菜单显隐
• 边界适配：添加JS逻辑判断子菜单是否超出右侧视口，若超出则将sub-menu的定位规则改为right: 100%; left: auto，避免内容被截断
• 无障碍优化：给菜单添加aria-expanded、aria-haspopup属性，支持键盘Tab切换触发菜单显示

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