Как правильно сделать этот элемент?

Question

[QaED]

Добрый день! Подскажите, как правильно сделать навигационное меню? При наведении должен образоваться блок сзади него, но у меня получается что блок находится ниже чем нужно и все меню сдвигается. Как это именно исправить?

https://codepen.io/qaed/pen/BaobeYR

Comments

[sasha_kamen]

.hover-nav{
width: 80px;
height: 30px;
display: flex;
justify-content: center;
}
.hover-nav a{
text-align:center;
displey:block;
width: 100%;
height: 100%;

}
.hover-nav a:hover {
background-color: #643a79;
border-radius: 3px;
text-align: center;
}

сделай вот такой код и будет всё понятно сам розберёшься

[QaED]

sasha_kamen, спасибо, высоту блока поменьше сделал, получился текст в центре :)

Answer 1

[Андрей]

так будет лучше

.hover-nav a {
  display: block;
  padding: 10px 20px;
  border-radius: 3px;
  transition: background-color .3s;
}

.hover-nav a:hover,
.hover-nav a:focus {
   background-color: #643a79;
}