Antonio Gvardijan Antonio Gvardijan - 1 year ago 69
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 {
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;

Answer Source

Essentially by adding a border, you're extending the nav by 3px. Have a look at the box-sizing property of CSS at 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).

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download