必须用包裹语义化结构，表达并列导航项且被屏幕阅读器识别；横向排列优先flex布局，hover写在a上，子菜单需嵌套ul且为li直接子元素，缩进仅用padding-left。
用 <ul></ul> 和 <li> 搭建基础菜单结构
HTML 本身不提供“菜单”语义标签，<ul></ul> 是最常用、最合理的选择——它天然表达一组并列的导航项，且被所有屏幕阅读器正确识别为列表。别用 <div> 套一堆 <code><a></a>，那会丢失语义和可访问性。
标准写法就是：<ul></ul> 包裹多个 <li>，每个 <li> 里放一个 <a></a>：
<nav><ul>
<li><a href="/home">首页</a></li>
<li><a href="/about">关于</a></li>
<li><a href="/contact">联系</a></li>
</ul></nav>
-
<nav></nav>是必须加的语义容器，告诉辅助技术“这是主导航” - 不要在
<li>外直接写<a></a>，否则列表结构断裂 - 避免给
<ul></ul>设list-style: none后忘了重置padding和margin，默认样式会撑出空白
去掉项目符号后如何让菜单横向排列
默认 <ul></ul> 是垂直堆叠，去点后仍保持块级行为。想横排，核心是控制 <li> 的显示方式，不是动 <ul></ul>。
- 最稳妥：给
<li>加display: inline-block，再设vertical-align: middle防文字基线错位 - 现代方案：给
<ul></ul>加display: flex，然后用gap控制间距（注意 IE 不支持） - 绝对别用
float: left—— 清除浮动麻烦，且父容器高度塌陷问题频发 - 如果用 Flex，记得给
<li>设flex: none或white-space: nowrap，防止小屏下文字换行挤乱布局
鼠标悬停和当前页高亮怎么加 CSS
纯 CSS 就能完成交互反馈，不需要 JS。关键是选对伪类和选择器组合。
- 悬停效果写在
<a></a>上，不是<li>：比如a:hover { background: #eee; } - 当前页标识靠 HTML 类名驱动，例如给当前项的
<li>加class="current"，再写li.current a { font-weight: bold; color: #007bff; } - 避免用
:active做点击态——它只在鼠标按下瞬间生效，体验断层；改用:focus保证键盘用户也能看到焦点 - 移动端要加
@media (hover: hover)包裹:hover规则，否则 iOS Safari 会在首次点击后卡住悬停态
响应式折叠菜单时 <ul></ul> 还能用吗
能，而且更推荐。折叠菜单本质是“同一套结构，不同展现”，<ul></ul> 的语义和嵌套能力完全够用。
- 汉堡按钮控制的是
<ul></ul>的max-height+overflow，或配合visibility/opacity实现淡入 - 下拉子菜单就用嵌套
<ul></ul>：<li> <a>产品</a><ul><li><a>Web</a></li></ul> </li> - 子菜单默认
position: absolute，但必须确保父<li>有position: relative，否则定位脱标 - 别为了“省事”把整个菜单用 JS 生成字符串再
innerHTML注入——破坏 SSR 可用性，也增加首屏阻塞
菜单结构越简单，后期加无障碍属性（如 aria-expanded、aria-haspopup）越容易，别在 HTML 层就过度设计。
