如何实现菜单子项水平显示并适配移动端与桌面端？

我来帮你搞定这个问题！你现在的下拉子项是垂直排列，主要是因为子菜单的<li>设置了display: list-item，而且子菜单本身没有做水平布局的设置。我们只需要调整几个CSS属性，就能实现水平显示，同时保证在手机和桌面端都能自适应。

核心修改步骤 #

1. 给子菜单<ul>加上弹性布局 #

原来的子菜单默认是块级元素，我们用flexbox来让子项水平排列，同时开启自动换行适配小屏幕：

ul li ul {
  display: none;
  position: absolute;
  top: 2em;
  left: 0;
  /* 新增flex相关属性 */
  flex-wrap: wrap; /* 空间不足时自动换行 */
  width: auto; /* 自适应内容宽度 */
  min-width: 100%; /* 至少和父菜单项一样宽，避免太窄 */
}

然后把li:hover ul的display: block改成display: flex，让弹性布局生效：

ul li:hover ul {
  display: flex;
}

2. 调整子菜单<li>的显示样式 #

把子项的display: list-item去掉，改成适合水平排列的样式，同时去掉固定宽度让它自适应内容：

ul li ul li {
  display: inline-block; /* 或者直接用flex的默认值也可以 */
  position: relative;
  width: auto; /* 去掉原有的固定宽度 */
  white-space: nowrap; /* 防止单个子项内容被拆成两行 */
  border-bottom: none; /* 去掉子项的底部边框，避免视觉混乱 */
  margin-right: 1em; /* 给子项之间加个间距，看起来更舒服 */
  padding: 0 0.5em; /* 可选，增大点击区域提升交互体验 */
}

3. 微调三级菜单的弹出位置 #

因为二级菜单变成水平了，三级fly-out菜单需要调整位置，确保从父项的右侧弹出：

ul li ul li ul {
  display: none;
  position: absolute;
  top: 0;
  left: 100%; /* 相对于父项右侧弹出 */
  flex-wrap: nowrap; /* 三级菜单保持垂直排列，不需要换行 */
  min-width: auto; /* 宽度自适应内容 */
}

另外记得给三级菜单的子项恢复原有样式，保持垂直排列：

ul li ul li:hover ul li {
  display: list-item;
  width: 10em; /* 恢复固定宽度 */
  border-bottom: 2px solid #ccc;
  margin-right: 0; /* 去掉之前加的间距 */
}

完整修改后的CSS代码 #

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul li {
  display: inline-block;
  width: 10em;
  height: 2em;
  line-height: 2em;
  position: relative;
  border-bottom: 2px solid #ccc;
}
ul li:hover {
  background-color: #ffa;
}
ul li ul {
  display: none;
  position: absolute;
  top: 2em;
  left: 0;
  flex-wrap: wrap;
  width: auto;
  min-width: 100%;
}
ul li:hover ul {
  display: flex;
}
ul li ul li {
  display: inline-block;
  position: relative;
  width: auto;
  white-space: nowrap;
  border-bottom: none;
  margin-right: 1em;
  padding: 0 0.5em;
}
ul li ul li:hover {
  background-color: #ffa; /* 给子项hover加背景色，提升交互感 */
}
ul li ul li ul {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  flex-wrap: nowrap;
  min-width: auto;
}
ul li ul li:hover ul {
  display: block;
}
ul li ul li:hover ul li {
  display: list-item;
  width: 10em;
  border-bottom: 2px solid #ccc;
  margin-right: 0;
}

效果说明 #

• 二级下拉菜单现在是水平排列，空间不够时会自动换行，完美适配手机端
• 所有子项宽度自适应内容，不会出现多余的留白或溢出
• 三级fly-out菜单保持原有垂直弹出的交互逻辑，不影响使用

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