导航悬停效果实现求助：为导航链接添加带阴影的悬停框

嘿，我来帮你搞定这个导航栏的悬停效果！首先咱们先把你的HTML结构补得完整一点，方便后续写样式：

<div class="row">
  <nav class="main-nav nav-js">
    <img class="logo" src="your-logo-url.png" alt="网站logo">
    <ul class="nav-list">
      <li class="nav-item"><a href="#about_us" class="nav-link">ABOUT US</a></li>
      <li class="nav-item"><a href="#services" class="nav-link">SERVICES</a></li>
      <li class="nav-item"><a href="#contact" class="nav-link">CONTACT</a></li>
    </ul>
  </nav>
</div>

接下来是核心的CSS样式，咱们一步步实现你要的效果：

/* 先给导航列表做基础布局，让链接横向排列 */
.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 2rem; /* 链接之间的间距，可按需调整 */
  align-items: center;
}

/* 导航项的基础样式，给伪元素预留定位基准 */
.nav-item {
  position: relative; 
  padding-top: 0.5rem; /* 给上方的框留出空间，避免覆盖文字 */
}

/* 导航链接的基础样式 */
.nav-link {
  text-decoration: none;
  color: #333; /* 替换成你网站的文字主色 */
  font-weight: 500;
}

/* 关键：悬停时显示的上方带阴影的框，用伪元素实现 */
.nav-item:hover::before {
  content: "";
  position: absolute;
  top: 0; /* 贴在导航项的顶部 */
  left: 0;
  right: 0;
  height: 4px; /* 框的高度，可调整 */
  background-color: #2563eb; /* 替换成你想要的框的颜色 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 阴影效果，参数可按需调整 */
  border-radius: 2px 2px 0 0; /* 可选：给框的底部加圆角，更柔和 */
}

关键细节说明： #

• 给.nav-item设置position: relative，是为了让伪元素::before能精准定位在链接的正上方，不会乱跑。
• padding-top: 0.5rem是为了让链接文字和上方的框保持间距，避免被框压住影响可读性。
• 如果你想让框的宽度只覆盖文字部分，而不是整个导航项，可以把position: relative移到.nav-link上，这样伪元素的宽度会和文字内容完全匹配。
• 阴影参数可以自由调整：比如把rgba(0,0,0,0.2)改成更深的0.3，或者把模糊半径调到6px，就能得到不同的阴影效果。

你可以根据自己网站的配色和布局，调整颜色、间距、阴影这些细节，试试效果吧！

内容的提问来源于stack exchange，提问作者Nelson Pacheco