导航栏CSS问题求助：Active与Hover样式不一致及投影异常

嘿，这两个都是导航栏布局里很常见的小问题，我来给你拆解解决办法：

问题1：Active状态尺寸与Hover不一致 #

你说active状态会高亮整个导航栏高度，大概率是因为你的active样式没有和hover保持一致的尺寸约束。比如很多时候我们会给导航菜单项设置padding来控制点击区域的大小，hover时只在这个padding范围内显示背景，但active状态可能误给父元素加了背景，或者没有限制背景的范围。

给你个实用的修复示例：

/* 基础导航菜单项样式 */
.nav-link {
  display: inline-block;
  padding: 8px 16px; /* 这里定义了点击区域的尺寸 */
  text-decoration: none;
  color: #333;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

/* Hover状态 - 仅在padding范围内显示背景 */
.nav-link:hover {
  background-color: #f0f0f0;
}

/* Active状态 和Hover完全对齐尺寸 */
.nav-link.active {
  background-color: #2563eb;
  color: white;
  /* 这里不要加额外的高度/拉伸样式，继承基础的padding就好 */
}

关键：如果你的导航栏用了Flex布局，记得给菜单项加align-self: center，避免元素被拉伸填满父元素的高度，这样active的背景就只会在你定义的点击区域里显示啦。

问题2：导航栏与Main Div同平面导致阴影模糊 #

这个问题在本地项目里确实比Codepen容易出现，因为Codepen的预览容器自带了默认间距，而你的实际场景中main和导航栏紧挨着甚至重叠，导致导航栏的drop shadow被main挡住，看起来不均匀。

有两个简单的解决思路：

方案1：提升导航栏的层级 #

给导航栏设置相对定位和更高的z-index，让它的阴影能显示在main的上方：

.navbar {
  position: relative;
  z-index: 10; /* 只要比main的层级高就行，main默认z-index是auto */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.main-content {
  /* 可选：如果阴影还是有点被挡，给main加一点顶部间距 */
  margin-top: 6px;
}

方案2：给Main添加顶部外边距 #

不想用z-index的话，直接给main加足够的margin-top，让导航栏的阴影能完整露出来：

.main-content {
  /* 数值要大于阴影的模糊半径，比如阴影是0 3px 6px，那margin-top至少6px以上 */
  margin-top: 8px;
}

这样两个元素就不会重叠，阴影自然就清晰均匀了。

内容的提问来源于stack exchange，提问作者Kevin P.