Нужно сделать так, чтобы при наведении на один из элементов (в котором появляется padding), другие элементы оставались на своем месте и никак не изменялись в ширину. Как бы нужно убрать сжатие.
Пробовал с помощью box-sizing: border-box
, но ничего не вышло.
body{
margin: 0;
}
.panel{
width: 100%;
height: 40px;
border-bottom: 1px solid;
display: flex;
align-items: center;
}
.main-menu {
width: 600px;
display: flex;
justify-content: space-between;
list-style-type: none;
box-sizing: border-box;
margin: 0 auto;
padding: 0;
}
.main-menu li a {
font-family: Arial;
font-size: 15px;
color: #a69999;
text-decoration: none;
text-transform: uppercase;
transition: .3s;
box-sizing: border-box;
}
.main-menu li a:hover {
background-color: #f0e2e2;
border-radius: 10px;
padding: 8px;
}
<div class="panel">
<ul class="main-menu">
<li><a href="">Services</a></li>
<li><a href="">About</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Team</a></li>
<li><a href="">Pricing</a></li>
<li><a href="">Testmonial</a></li>
</ul>
</div>
transform: scale(1.05)
или около того)