最稳妥方案是在导航父项（如li.has-dropdown）上用::after伪元素配合border绘制箭头，需设content:""、position:relative，并同步处理悬停/焦点/深色模式/展开状态及IE11兼容性问题。
用 ::after 伪元素加箭头最稳妥
直接在导航父项（比如 <li class="has-dropdown">）上用 ::after 插入小三角，不依赖额外 HTML 标签，语义干净，样式也容易控制方向和颜色。
常见错误是写成 ::before 或忘了设置 content: "" —— 没有 content，伪元素根本不会渲染。
- 必须设
position: relative在父项上，否则::after的absolute定位会相对 body 偏移 - 推荐用
border画三角：比如border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #666; - 避免用图片或字体图标——加载、缩放、配色都多一层麻烦
li.has-dropdown {
position: relative;
}
li.has-dropdown::after {
content: "";
position: absolute;
top: 50%;
right: 8px;
margin-top: -2px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #666;
}
箭头要随悬停/焦点状态变色，别只写静态色
很多导航在 :hover 或 :focus 时文字变色，但箭头还灰着，视觉割裂。箭头颜色得同步响应状态。
尤其要注意键盘用户按 Tab 进入时的 :focus 样式，否则可访问性不达标。
立即学习“前端免费学习笔记（深入）”；
- 不要单独给
::after写颜色，而是在li.has-dropdown:hover::after里重设border-top-color - 如果用了 CSS 变量（比如
--arrow-color），记得在:hover里更新变量值，否则子元素继承不到新色 - 深色模式下，若用
prefers-color-scheme切换主题，箭头色也要一起切
下拉菜单展开时，箭头该旋转 180° 吗？看交互逻辑
不是所有场景都需要旋转。只有明确表示“当前展开”的父子菜单才适合加旋转动画；纯悬停显示的二级菜单，旋转反而干扰直觉。
旋转要用 transform: rotate(180deg)，别用 border-bottom 替代——那样只是换了个方向的三角，不是“翻转”动作。
- 加
transition: transform 0.2s ease让旋转平滑，但别设太长，否则反馈滞后 - 状态判断靠 JS 控制类名更可靠，比如
li.has-dropdown.opened::after，比纯 CSS:hover更可控 - 移动端点开收起频繁，旋转动画可能造成轻微卡顿，低端设备建议关掉
transform动画或降级为颜色变化
IE11 兼容时，::after 箭头可能错位或消失
IE11 对 ::after + position: absolute 在 display: inline 元素上的支持有问题，特别是导航项用 <a></a> 包裹又没设宽高时。
典型现象：箭头跑到左上角、叠在文字上、或完全不显示。
- 强制父项
display: inline-block或display: block，哪怕只是 IE11 下的 hack - 避免用
top: 50%+margin-top: -2px垂直居中，IE11 对百分比计算不准；改用top: 5px这类固定值 - 别依赖
transform: translateY(-50%)垂直居中，IE11 需要-ms-transform前缀且兼容性差
