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;}
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 {
margin-bottom:-3px;
}
I'd go with the first solution.
This would give you what you want, even though it's using box-shadow instead of border. But it's a quick and simple fix.
nav li a:hover {
box-shadow: 0 3px 0 #e32b21;
}
Another option would be to just add 3px less to your element , which you had 10px before, so make it 7px, might do the trick
nav li a:hover {
padding-bottom: 7px;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With