When hovered, one of the navigation bar elements changing position-CodePudding

just looking for a quick fix, I know I should get rid of the padding but I need it for the hover effect, or else its shape is too small. please kindly LET ME KNOW what's the matter. I want my navbar not to change its position while hovering on it.

HTML:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>ონლაინ მაღაზია</title>
</head>
<body>
<nav>
    <ul>
    <li><div ><a href="#">მთავარი</a></div></li>
    <li><a href="#">პროდუქცია</a></li>
    <li><a href="#">კონტაქტი</a></li>
    <li><a href="#">ჩვენ შესახებ</a></li>
    <li><div ><a href="#">&#10157; შესვლა</a></div></li>
    </ul>
</nav>
</body>
</html>

CSS:

nav{
    width: 99%;
    height: 78px; 
    position: absolute; 
    top: 0px; 
    background: rgb(129, 92, 92);
}

nav ul{
    list-style-type: none;
    margin-left: 3%;
    margin-right: 3%;
    position: fixed;
}

nav li{
    padding-left: 10px;
    padding-right: 10px;
    display: inline-flex;
    margin-left: 10px;
    align-items: center;
}

nav a{
    text-decoration: none;
    font-size: 18px;
    color: #ffff;
    padding: 10px
}

.main{
    margin-right: 550px;
}

.login{
    margin-left: 440px;
}

nav a:hover{
   background-color: rgb(136, 109, 109);
   display: block;
   border-radius: 30px;
   transition: 0.3s;
}

CodePudding user response：

I believe removing display: block fixes your problem on the nav a:hover selector.

nav a:hover{
background-color: rgb(136, 109, 109);
/* display: block; */
border-radius: 30px;
transition: 0.3s;
}

I would try that

CodePudding user response：

if you remove display:block from your class it seems to do what you are asking -

nav a:hover{
   background-color: rgb(136, 109, 109);
   border-radius: 30px;
   transition: 0.3s;
}