在不按下其父 div 的情况下为导航链接添加底部边框答案

【问题标题】：Adding a bottom border to nav links without pushing down its parent div在不按下其父 div 的情况下为导航链接添加底部边框
【发布时间】：2014-01-11 06:33:26
【问题描述】：

我有一个导航菜单，我想在悬停时为其 li 元素添加一个 3px 实心边框。问题是当您将鼠标悬停在这些 li 上时，它们的边框会向下推其父容器 div，并带有 1px 实心边框。将导航菜单及其父容器保持在一个平面上而导航的边框覆盖容器的底部边框的最佳方法是什么？（请注意，cmets 只是为了消除 inline-block 元素之间的额外间距）。

HTML

<nav>
 <ul>
  <li><a href="">Menu 1</a></li><!--
  --><li><a href="">Menu 2</a></li>!--
   --><li><a href="">Menu 3</a></li>
 </ul>
</nav>

CSS

nav {border-bottom: 1px solid #e6e6e6;}
nav li {display: inline-block; list-style: none;}
nav li a {color: #999; display: inline-block; font-weight: bold; padding: 0 15px 10px 15px; text-decoration: none;}
nav li a:hover {border-bottom: 3px solid #e32b21; color: #e32b21;}

【问题讨论】：

我也遇到了同样的问题，谢谢你的提问！！！

标签： html css

【解决方案1】：

这会给你你想要的，即使它使用的是 box-shadow 而不是边框。但这是一个快速而简单的解决方法。

nav li a:hover { 
    box-shadow: 0 3px 0 #e32b21; 
}

另一种选择是在你之前有 10px 的元素中减少 3px，所以将它设置为 7px，可能会成功

nav li a:hover {
     padding-bottom: 7px;
}

【讨论】：

【解决方案2】：

你可以用透明边框代替它。

jsFiddle example

nav li a {
    border-bottom: 3px solid transparent;
}

或者，您可以在 :hover 上添加 3px 的负边距

jsFiddle example

nav li a:hover {
    margin-bottom:-3px;
}

我会选择第一个解决方案。

【讨论】：

第一个选项似乎有效。知道如何覆盖父 div 以使其覆盖其底部边框吗？我认为我必须将 ul 的位置设置为相对，然后将其设置为顶部：1px。不知道这是否是最好的解决方案。
@CarlEdwards 如果我对你的理解正确，你想要这样的东西..jsfiddle.net/JoshC/gxukz/2 ..？基本上，只需设置ul { padding:0; margin:0; }
成功了！感谢您的帮助！
@JoshCrozier 谢谢我多年来一直在努力寻找解决方案，您以非常简单和聪明的方式解决了它