如何在三级导航菜单中用Flex实现布局并保持内容可访问性

问题描述 #

我正在用原生HTML、CSS和JS构建一个三级Mega Menu组件，第一级沿导航横幅横向排列。目前在Flex布局下遇到语义化结构的难题：第二级需要作为左侧列，第三级以卡片形式展示在右侧。我通常会用Grid拆分这两部分，但此场景下无法适用。比如给第二级的ul设置left:0后，它的子元素（第三级）需要显示在右侧？附上类似设计的参考图，寻求实现建议。

原始代码片段 #

CSS

.container {
  background-color: lightgreen;
  min-height: 40px;
}

.nav-menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

li {
  list-style: none;
}
 
li ul {
    position: absolute;
    top: 152px;
}

HTML

<div class="container">
  <ul class="nav-menu">
    <li>
      <a href="#">Level 1</a>
      <ul>
        <li>
          <a href="#">Level 2</a>
          <ul>
            <li><a href="#">Level 3</a></li>
            <li><a href="#">Level 3</a></li>
            <li><a href="#">Level 3</a></li>
            <li><a href="#">Level 3</a></li>
            <li><a href="#">Level 3</a></li>
          </ul>
        </li>
        <li><a href="#">Level 2</a></li>
        <li><a href="#">Level 2</a></li>
        <li><a href="#">Level 2</a></li>
      </ul>
    </li>
    <li><a href="#">Level 1</a></li>
    <li><a href="#">Level 1</a></li>
    <li><a href="#">Level 1</a></li>
    <li><a href="#">Level 1</a></li>
  </ul>
</div>

解决方案 #

不用局限于Grid，Flex完全可以实现需求，核心是调整下拉容器的布局规则，同时维持语义化结构：

修改后的完整代码 #

CSS

.container {
  background-color: lightgreen;
  min-height: 40px;
  position: relative; /* 为下拉菜单提供定位参考 */
}

.nav-menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 0 1rem;
}

li {
  list-style: none;
  position: relative;
  padding: 0.5rem 1rem;
}

/* 第一级下拉容器（Level2的父容器） */
.nav-menu > li > ul {
  position: absolute;
  top: 100%; /* 相对于父元素底部定位，更精准 */
  left: 0;
  width: 100vw; /* 撑满视口宽度，符合Mega Menu特性 */
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin: 0;
  padding: 1rem;
  display: none; /* 默认隐藏 */
  flex-direction: row;
  gap: 2rem;
}

/* Level2列表：固定左侧宽度 */
.nav-menu > li > ul > li {
  flex: 0 0 200px; /* 固定宽度，不缩放 */
}

/* Level3容器：占满剩余空间，实现卡片布局 */
.nav-menu > li > ul > li:first-child > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0;
  padding: 0;
  flex: 1; /* 占满剩余空间 */
}

/* Level3卡片样式 */
.nav-menu > li > ul > li:first-child > ul > li {
  flex: 0 0 calc(33.33% - 0.66rem); /* 三列布局，可按需调整 */
  background: #f5f5f5;
  padding: 1rem;
  border-radius: 4px;
}

/* hover时显示下拉菜单 */
.nav-menu > li:hover > ul {
  display: flex;
}

HTML（保持原语义化结构不变）

<div class="container">
  <ul class="nav-menu">
    <li>
      <a href="#">Level 1</a>
      <ul>
        <li>
          <a href="#">Level 2</a>
          <ul>
            <li><a href="#">Level 3</a></li>
            <li><a href="#">Level 3</a></li>
            <li><a href="#">Level 3</a></li>
            <li><a href="#">Level 3</a></li>
            <li><a href="#">Level 3</a></li>
          </ul>
        </li>
        <li><a href="#">Level 2</a></li>
        <li><a href="#">Level 2</a></li>
        <li><a href="#">Level 2</a></li>
      </ul>
    </li>
    <li><a href="#">Level 1</a></li>
    <li><a href="#">Level 1</a></li>
    <li><a href="#">Level 1</a></li>
    <li><a href="#">Level 1</a></li>
  </ul>
</div>

关键要点 #

1. 定位参考：给.container添加position: relative，避免下拉菜单脱离导航栏定位。
2. Flex容器转换：将第一级下拉ul（Level2的父容器）设为Flex容器，让Level2列表和Level3容器横向排列。
3. 宽度分配：Level2列表用flex: 0 0 200px固定宽度，Level3容器用flex:1占满剩余空间。
4. 卡片布局：Level3内部用flex-wrap: wrap实现自动换行的卡片效果，可通过调整flex-basis修改列数。
5. 交互控制：用hover事件替代固定top定位，实现下拉菜单的显示/隐藏，逻辑更合理。

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