Adding a bottom border to nav links without pushing down its parent div

I have a nav menu that I’d like to add a 3px solid border on hover to its li elements. The problem is when you hover over these li’s their border pushes down their parent container div with a 1px solid border. What would be the best approach to keeping both the nav menu and its parent container on one plane while the nav’s border overlays the bottom border of the container? (Please note the comments are just there to remove the extra spacing in between the inline-block elements).


    <li><a href="">Menu 1</a></li>
    <li><a href="">Menu 2</a></li>
    <li><a href="">Menu 3</a></li>


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


You could displace it with a transparent border.

jsFiddle example

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

Alternatively, you could add a negative margin of 3px on :hover

jsFiddle example

nav li a:hover {

I’d go with the first solution.