我有一个导航菜单，我想在悬停时为其li元素添加一个3px的实线边框。问题是，当您将鼠标悬停在这些li的上方时，其边框会以1px的实线边框向下推其父容器div。将导航菜单及其父容器都保持在一个平面上同时导航的边界覆盖容器的底部边界的最佳方法是什么？（请注意，注释仅在此处用于删除行内块元素之间的多余间距）。
的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;}
您可以使用透明边框替换它。
nav li a {
border-bottom: 3px solid transparent;
}
或者，您可以在上添加3px的负边距 :hover
nav li a:hover {
margin-bottom:-3px;
}
我会选择第一个解决方案。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句