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).
You could displace it with a transparent border.
Alternatively, you could add a negative margin of 3px on
I’d go with the first solution.