通过为 标签而非 设置 padding-top，并配合 height: fit-content 和移除父容器的 align-items: center，可精准实现单个导航项悬停时向下延伸的“绘制”动效，避免其他项位移。
在实现导航栏“手绘式”悬停展开效果时，常见误区是直接对 <li> 元素应用 padding-top —— 这会触发 Flex 布局中 align-items: stretch 的默认行为，导致所有兄弟 <li> 被强制拉伸以匹配最高子项高度，从而整体偏移，破坏布局稳定性。
正确解法核心在于：将视觉扩展动作下沉至 <a></a> 标签，并隔离其影响范围。
具体需三步协同：
-
限制
<li>的高度行为：添加height: fit-content，使其不再被动拉伸，仅包裹内容高度； -
移除
<header></header>的align-items: center：防止<h2></h2>因<ul></ul>高度突变而上下浮动； -
将
padding-top和过渡应用在<a>:hover</a>上：利用<a></a>作为弹性容器内的内联块级元素，在悬停时仅自身向上撑开空间，下方留白形成“向下绘制”的视觉错觉（实际是内容区上移，底部空白延展）。
以下是优化后的完整 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 可保留，但 li 已不受其影响 */
}
li {
border: 0.5px solid black;
border-width: 0 0.5px 0.5px;
border-radius: 0 0 5px 5px;
height: fit-content; /* 关键：阻止 li 被 flex 拉伸 */
}
li a {
color: #000;
text-decoration: none;
display: flex;
align-items: center;
height: 100%; /* 保持垂直居中基础态 */
transition: padding-top 0.2s ease; /* 显式声明过渡属性更可靠 */
}
li a:hover {
padding-top: 100px; /* 扩展发生在 a 内部，不影响其他 li 布局 */
}
✅ 效果说明：悬停时，仅当前 <a></a> 的顶部内边距增大，视觉上文字“缓慢下沉”，同时 <li> 底部圆角与边框自然延展，模拟墨水从顶部缓缓画出的动画感。其余导航项位置完全固定，Logo 标题亦无抖动。
⚠️ 注意事项：
- 避免对
<li>使用transform: translateY()实现类似效果——它会脱离文档流，无法产生真实的“延伸”边界（如边框、背景、阴影无法随动）； - 若需更平滑的绘制感，可配合
background-size渐变或伪元素::after模拟线条生长，但本方案已满足轻量级“向下展开”核心需求； -
fit-content在旧版浏览器中兼容性有限，如需支持 IE 或 Safari height: auto +min-height组合替代，但需额外测试。
此方案兼顾语义清晰、CSS 轻量与动效精准，是现代导航悬停动效的推荐实践。
