Antonio Gvardijan Antonio Gvardijan - 7 months ago 10
HTML Question

adding bottom border on navigation hover without changing position on everything below

I want to make my navigation have bottom border while in hover, but then it moves all my content 3px down. How do I make it work without moving all content down.

CSS of navigation :

nav {
width: 80%;
margin: 0 auto;

}
nav ul {
list-style-type: none;
}
nav ul li {
float: left;
width: 19.7%;
background-color: #e88610;
text-align: center;
border-right: 3px solid gray;
border-top: 1px solid gray;
}
nav ul li:last-child {
border-right: none;
border-bottom-right-radius: 5px;
}
nav ul li:first-child {
border-bottom-left-radius: 5px;
}
nav ul li a {
text-decoration:none;
display: block;
padding: 10px 0px;
color: white;
}
nav ul li a:visited {
color: white;
}
nav ul li a:hover{
background-color: orange;
border-bottom: 3px solid gray;
}


CSS of content below :

#novi_clanak {
background-color: rgba(255, 255, 255, 0.65);
width: 100%;
padding-bottom: 40px;
margin-top:35px;
}

Answer

Essentially by adding a border, you're extending the nav by 3px. Have a look at the box-sizing property of CSS at http://www.w3schools.com/css/css3_box-sizing.asp. You want your nav ul li a:hover to have box-sizing: border-box;. That will take the bottom border's 3px into account for the element height.

Alternatively, shorten the nav ul li a:hover height by 3px (set it to 39px).