有没有一种 CSS 方法可以让导航底部边​​框与悬停边框对齐？

Question

我创建了一个具有以下结构的基本导航：

<div class="nav">
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="">Another Link</a></li>
    <li><a href="">Another Link</a></li>
  </ul>
</div>

导航是一个典型的水平导航，lis 浮动到左侧。问题是，每个用户的导航都是动态的，并且导航永远不会占用 100% 的屏幕宽度。
但是，我希望悬停/当前导航链接具有红色下划线，而 站点容器剩余宽度 的其余导航链接具有不同颜色的底部边框。
这是我想要的图片：

我可以通过将默认边框颜色的背景图像附加到导航div 来做到这一点，但我不确定如何使用纯 CSS 来做到这一点。

这可能吗？
谢谢。

---

编辑：这是 CSS（请注意 CSS 并没有给我预期的效果）：

.nav ul {
  border-bottom: #DDD solid 5px;
  list-style: none;
  overflow: hidden;
}

.nav li {
  float: left;
}

.nav a {
  border-bottom: #FFF solid 5px;
  display: block;
  font-size: 16px;
  font-weight: bold;
  padding: 5px 20px;
  text-decoration: none;
}

.nav_link:hover {
  border-bottom: #F00 solid 5px;
  color: #F00;
}

.current_page {
  border-bottom: #F00 solid 5px;
  color: #F00;
}

Answer 1

这是一个可能的解决方案。

在nav 元素上设置上下边框。然后使用您的a 标签，将它们设置为与非悬停颜色和大小相匹配的底部边框。在a 标记上设置一个负数margin-bottom，等于nav border-bottom 的大小。然后在悬停时更改a 元素的边框颜色。

这是一个显示它的小提琴：http://jsfiddle.net/FNLmf/

*注意：我没有使用浮点数，我使用了inline-block。您可以使用浮点数，但请务必清除您的 nav 元素。