横向导航栏应使用 display: flex 实现，HTML 结构须为 ，避免 float 和 div 套 a；下拉菜单需用 @media 区分 hover 设备；fixed 导航需 body padding-top 或 main margin-top 修复遮挡。
横向导航栏不需要 JavaScript 就能跑通，但纯靠 float 会踩坑；现代项目请直接用 display: flex，否则响应式切换和子菜单定位容易失控。
HTML 结构必须用 <nav></nav> + <ul></ul> 组合
语义化不是可选项——<nav></nav> 告诉屏幕阅读器这是导航区，<ul></ul> 表达链接间的并列关系。不要用 <div> 套一堆 <code><a></a>，否则 SEO 和可访问性直接受损。
常见错误现象：ul 里漏写 li，直接把 a 放进 ul；或把整个导航写成 div > a + a + a。
- 正确结构：
<nav><ul> <li><a href="/">首页</a></li> <li><a href="/about">关于</a></li> </ul></nav> - Logo 如果存在，应放在
<nav></nav>内但独立于ul，比如<div class="logo">MySite</div> - 避免在
li外加额外包裹层（如<span></span>），它会干扰:hover和焦点管理
display: flex 是横向排列最稳的方案
老教程还在教 float: left 或 inline-block，但它们对垂直居中、等宽分配、换行控制都乏力，且 overflow: hidden 清浮动容易漏掉子元素高度塌陷。
立即学习“前端免费学习笔记（深入）”；
使用 flex 时注意三处关键设置：
-
nav ul必须设display: flex，而非只给nav设 -
nav ul li推荐用flex: 1实现自动均分宽度；若需固定间距，改用gap: 1rem（比margin更干净） - 所有
a标签必须设display: block，否则点击热区仅限文字，padding 不生效
示例片段：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 1.5rem;
}
nav ul a {
display: block;
padding: 0.75rem 1rem;
text-decoration: none;
color: #333;
}
下拉菜单的 :hover 在移动端根本不可靠
桌面端用 li:hover > ul 显示子菜单没问题，但 iOS 和 Android 的触摸设备没有真正的 hover 状态，手指点一下就触发又立刻收起，体验断裂。
真正上线前必须处理这个断点：
- 纯 CSS 方案：用
@media (hover: hover) and (pointer: fine)包裹下拉逻辑，确保只在鼠标设备生效 - 移动端 fallback：要么隐藏下拉项，要么改用 JS 控制显隐（加
aria-expanded和键盘支持） - 子菜单
ul必须设position: absolute，且父级li要加position: relative，否则定位错乱
固定定位（position: fixed）后内容被遮挡怎么办
加了 top: 0 后，页面正文第一屏常被导航栏盖住——这不是 bug，是 CSS 规范行为。
修复方式只有两种，选其一即可：
- 给
body加padding-top，值等于导航栏高度（如60px） - 给第一个主要内容区块（如
main或.hero）加margin-top，同样匹配导航高度
别用 body { margin-top: 60px }，它会把整个页面下推，滚动条初始位置异常；也别依赖 JS 动态计算高度，CSS 静态值更可靠。
最后提醒：z-index 不是越高越好。导航栏设 z-index: 100 足够，避免和弹窗、tooltip 的层级冲突；同时确保它不被父容器的 transform 或 opacity 截断堆叠上下文。
