向导航链接添加底部边框而不下推其父div

我有一个导航菜单,我想在悬停到其li元素时添加一个3px实线边框.问题是当你将鼠标悬停在这些li上时,它们的边框会用1px实线边框向下推动它们的父容器div.当导航边框覆盖容器的底部边框时,将导航菜单及其父容器保持在一个平面上的最佳方法是什么？(请注意,注释仅用于删除内联块元素之间的额外间距).

HTML

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;}

Josh Crozier.. 13

您可以使用透明边框替换它.

jsFiddle例子

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

或者,您可以添加3px的负余量 :hover

jsFiddle例子

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

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