多列下拉导航需靠 CSS Grid 或 Flexbox 实现，HTML 无原生支持；Grid 适合项多且需可控分列，Flex 适合项少或响应式场景；须兼顾键盘焦点顺序、aria 属性及语义角色以保障可访问性。
多列下拉导航不是靠 HTML 标签“自动分列”
HTML 本身没有“多列下拉”语义标签，nav、ul、li 只负责结构层级，列数和展开逻辑完全由 CSS + JS 控制。常见误区是以为写个 ul 套三层 ul 就能自动变多列——实际渲染出来仍是单列嵌套，视觉上还是竖排堆叠。
用 CSS Grid 实现真正可控的多列下拉区
当子菜单项较多（比如“产品”下有 8 个分类），需要横向铺开成 2–3 列而非一长串竖排时，display: grid 是最直接可靠的方案：
- 给下拉容器（如
ul.dropdown-content）设display: grid，配合grid-template-columns: repeat(2, minmax(160px, 1fr))) - 避免用
column-count：它只对纯文本流生效，对li这类块级链接项无效，且无法控制每列内容分布 - 若需首项跨列（如“全部产品”标题横跨两列），加
grid-column: 1 / -1到对应li - 注意
grid-auto-rows: minmax(36px, auto)防止小屏下单行高度塌缩
Flexbox 适合简单双列或响应式折叠场景
如果下拉菜单项较少（≤4 项），或希望小屏自动退化为单列，display: flex 更轻量：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 设
flex-wrap: wrap允许换行，再用flex-basis: calc(50% - 8px)控制双列（留出gap） - 别依赖
justify-content: space-between对齐——项数为奇数时末尾会空一大块，改用justify-content: flex-start+gap - 移动端用
@media (max-width: 768px)直接切回flex-direction: column，比 JS 切换更稳定 - 禁用
flex: 1在菜单项上：会导致宽度被强行拉伸，破坏文字可读性
容易被忽略的可访问性与交互细节
多列下拉最常翻车的地方不在布局，而在用户实际操作路径断裂：
- 键盘 Tab 焦点必须能顺序进入每列中的每个
a，不能因grid或flex改变 DOM 顺序而跳项 - 鼠标移入父
li触发下拉后，焦点应自动移到第一个子链接；否则屏幕阅读器用户会卡在空白区域 - 用
aria-expanded="true/false"同步控制状态，别只靠 CSSvisibility或opacity隐藏——它们不改变可访问性树 - 下拉容器必须有明确
role="menu"，子项用role="menuitem"，否则 NVDA/JAWS 无法识别为菜单
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
