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