通过为 设置 height: fit-content 并将 padding-top 应用于 a:hover，可避免 Flex 容器整体重排，实现单个导航项悬停时向下延展的“绘制式”动画效果。
通过为 `
在实现导航栏悬停“绘制”（draw-like）动效时，一个常见误区是直接对 <li> 元素添加 padding-top。由于 <li> 默认在 Flex 容器（ul）中采用 align-items: stretch，且父级 <header></header> 又设置了 align-items: center，一旦某个 <li> 因 padding-top 增高，整个 Flex 行会重新计算基线与对齐高度——导致所有导航项被整体“顶起”，破坏布局稳定性。
✅ 正确解法的核心在于隔离变化范围：
- 为
<li>显式声明height: fit-content，使其不再拉伸以填满容器高度，从而解除stretch对齐的约束； - 将
padding-top移至<a></a>标签的:hover状态，利用<a></a>作为内容载体进行内边距扩展； - 同时移除
<header></header>的align-items: center，防止<h2></h2>因<li>高度波动而发生垂直偏移（保持 Logo 位置恒定）。
以下是优化后的完整 CSS 示例：
header {
display: flex;
justify-content: space-between;
margin: 0 50px;
border-top: 5px solid brown; /* 移除了 align-items: center */
}
ul {
display: flex;
list-style-type: none;
gap: 20px;
/* align-items: stretch; —— 默认即为 stretch，可省略 */
}
li {
border: 0.5px solid black;
border-width: 0 0.5px 0.5px;
border-radius: 0 0 5px 5px;
height: fit-content; /* ✅ 关键：阻止 li 拉伸，隔离 hover 影响 */
}
li a {
color: #000;
text-decoration: none;
display: flex;
align-items: center;
height: 100%; /* 仍保持占满 li 高度（初始状态） */
transition: padding-top 0.2s ease; /* 推荐显式声明过渡属性 */
}
li a:hover {
padding-top: 100px; /* ✅ 仅作用于当前 a，不影响其他 li 布局 */
}
⚠️ 注意事项：
- 不要使用
transform: translateY()替代padding-top——它仅位移元素而不增加实际占用空间，无法实现“向下延伸”的视觉绘制感； - 若需更平滑的绘制效果，可配合
overflow: hidden在<li>上，并用::before伪元素模拟渐显线条（进阶技巧）； - 所有
transition应定义在常态（如li a），而非仅:hover中，确保进出动画均生效。
该方案兼顾语义清晰性与渲染性能，在不依赖 JavaScript 的前提下，精准达成“单个导航项悬停时自下而上自然延展”的 UI 动效目标。
