My li elements move downwards when I hover over them

Question

My primary nav li elements shift downwards whenever I hover over them. I thought this was due to use of margin causing this, but I am still receiving this issue after removing margin use, and I'm not sure what it is. I know it's most likely something simple. Any help would be appreciated. Thank you.

/*primary nav bar*/
.primarynav {
    background-color: #ffffff;
    border: solid 1px #f76f4d;
    position: relative;
    height: 50px;
    width: 1430px;
    top: 10px;
}
    
.primarynav ul {
    position: relative;
    padding-bottom: 10px;
    text-decoration: none;
    padding-left: 100px;
}
    
.primarynav a {
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: #fd886b;
    width: 115px;
    height: 50px;
    padding: 17px 0px 0px 0px;
    font-weight: bold;
    border: 1px solid orangered;
}
    
/*primary navigation effects*/
/*.primarynav a:hover::before {
    background-color: #fd886b;
     
}
*/
    
.primarynav a:hover {
    color: white;
    background-color: #fd886b;
    border: 2px solid orangered;
    border-radius: 3px;
}
  
.mainnavigation li {
    display: inline-block;
    bottom: 51px;
    padding-top: 50px;
    text-align: center;
    position: relative;
    font-size: 15px;
    left: 200px;
}

<header class="primarynav">
  <div class="primaryContainer"> <!-- Main top of page navigation -->
     <nav alt="worldmainnavigation"><!-- Main navigation buttons on the top of the page (6) -->
       <ul class= "mainnavigation">
         <li><a href="Index.php">Home</a></li>  
         <li><a href="#">Items</a></li> 
         <li><a href="#">Categories</a></li>
         <li><a href="#">Favourites</a></li>
         <li><a href="#">Deals</a></li>
         <li><a href="#">List An Item</a></li>
      </ul>
    </nav>
  </div>
</header>

It is due to the border which you're adding on hover i.e border: 2px solid orangered; — VIshal Jain, Nov 19 '20 at 18:49

score 1 · Accepted Answer · answered Nov 19 '20 at 19:01

Adding margin: -2px; resolves this, its due to the border: 2px orangered.

.primarynav a:hover {
    color: white;
    background-color: #fd886b;
    border: 2px solid orangered;
    margin: -2px;
    border-radius: 3px;
}

/*primary nav bar*/
.primarynav {
    background-color: #ffffff;
    border: solid 1px #f76f4d;
    position: relative;
    height: 50px;
    width: 1430px;
    top: 10px;
}

.primarynav ul {
    position: relative;
    padding-bottom: 10px;
    text-decoration: none;
    padding-left: 100px;
}

.primarynav a {
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: #fd886b;
    width: 115px;
    height: 50px;
    padding: 17px 0px 0px 0px;
    font-weight: bold;
    border: 1px solid orangered;
}

/*primary navigation effects*/
/*.primarynav a:hover::before {
    background-color: #fd886b;
    
}
*/

.primarynav a:hover {
    color: white;
    background-color: #fd886b;
    border: 2px solid orangered;
    margin: -2px;
    border-radius: 3px;
}

.mainnavigation li {
    display: inline-block;
    bottom: 51px;
    padding-top: 50px;
    text-align: center;
    position: relative;
    font-size: 15px;
    left: 200px;
}

<header class="primarynav">
      <div class="primaryContainer"> <!-- Main top of page navigation -->
        <nav alt="worldmainnavigation"><!-- Main navigation buttons on the top of the page (6) -->
          <ul class= "mainnavigation">
            <li><a href="Index.php">Home</a></li>  
            <li><a href="#">Items</a></li> 
            <li><a href="#">Categories</a></li>
            <li><a href="#">Favourites</a></li>
            <li><a href="#">Deals</a></li>
            <li><a href="#">List An Item</a></li>
          </ul>
        </nav>
      </div>
   </header>

yes this works thank you very much – Demon King Nov 19 '20 at 19:04 — Demon King, Nov 19 '20 at 19:04

score 1 · Answer 2 · answered Nov 19 '20 at 19:04

1

it is because you add 3px border on hover.

answered Nov 19 '20 at 19:04

medzvre gena

115
1
1
9

My li elements move downwards when I hover over them

2 Answers2