CODEWITHSUNDEEP
htmlcss
Carl Edwards
Carl Edwards

Reputation: 14424

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

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

Upvotes: 11

Views: 9714

Answers (2)

CRABOLO
CRABOLO

Reputation: 8793

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

Upvotes: 4

Josh Crozier
Josh Crozier

Reputation: 240868

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.

Upvotes: 15

Related Questions