ul 默认样式必须清空，即 ul { margin: 0; padding: 0; list-style: none; }，否则圆点、边距会破坏布局；li 内 a 标签需设 display: block 并用 padding 控制尺寸；悬停与高亮应作用于 a 而非 li；图标推荐 background-image 并预留 padding-left；分割线用 li:not(:last-child) 避免多余线条。
ul 默认样式必须清空，否则圆点和边距会破坏布局
浏览器给 ul 自带 margin、padding 和 list-style（小圆点），不处理就会出现顶部空白、左侧缩进、符号乱入等问题。这不是“美观问题”，而是布局失控的起点。
必须一次性写全这三条：
ul { margin: 0; padding: 0; list-style: none; }- 不能只清
list-style-type，list-style是简写属性，漏掉它可能让list-style-image残留 - 如果用
nav包裹ul，也要注意nav在某些浏览器里有默认 margin，建议一并重置
li 本身不设宽高，真正可点击区域在 a 标签上
常见错误是给 li 设 height 或 width，但用户实际点击的是 a。而 a 默认是内联元素，无法响应宽高设置——所以必须用 display: block 把它撑开。
推荐写法：
-
ul li a { display: block; padding: 12px 20px; }（用padding控制高度比硬设height更安全） - 避免写
ul li { height: 40px; }，这样a不占满会导致点击热区变小 - 若需文字垂直居中，用
line-height匹配padding总高，例如padding: 14px 20px; line-height: 1.2;比固定line-height: 40px更适应多行文本
悬停和当前页高亮要作用在 a 上，不是 li
很多人写 ul li:hover，结果发现鼠标移进文字区域才触发，移到左右空白处就失效——因为 li 本身没有尺寸，真正有尺寸的是 a。
正确做法：
ul li a:hover { background-color: #007bff; color: white; }- 当前页高亮靠 JS 或服务端加
class="active"到对应a上，再写ul li a.active { ... } - 不要用
:focus替代:hover，键盘焦点行为和鼠标悬停逻辑不同，两者应共存而非互换
图标和分割线容易引发盒模型错位
加图标常用两种方式：list-style-image 或 background-image。前者兼容性差且对齐难；后者更可控，但要注意 padding-left 必须预留图标空间。
分割线也常踩坑：
- 写
li { border-bottom: 1px solid #eee; }会导致最后一项多一条线，应改用li:not(:last-child) { border-bottom: 1px solid #eee; } - 若用背景图做图标，记得设
background-repeat: no-repeat和background-position，否则图标会平铺或偏移 - 图标用
em或rem单位时，务必测试不同字号下的对齐，px反而更稳
