Добавление верхнего отступа к элементу навигации при наведении смещает все элементы навигации. Попытка добиться эффекта ⇐ CSS

[Anonymous]

Элементы li расширяются, даже если они не должны
Я пытаюсь добиться того, чтобы мой элемент li как бы вытягивался при наведении курсора.
Текущее поведение при наведении курсора на элемент li: все элементы получают отступы, а не только тот, на котором я наведен.
Ожидаемое поведение: наведенный элемент( и только наведенный элемент) получает верхнее значение заполнения и «рисуется» вниз по отношению к остальным.
РЕДАКТИРОВАТЬ: я также пытался использовать TranslateY, но проблема в том, что он перемещает мой элемент вместо того, чтобы расширять его вниз, что не дает эффекта «вытягивания», который я пытаюсь реализовать.

Код: Выделить всё

header {
display: flex;
justify-content: space-between;
margin: 0 50px;
align-items: center;
border-top: 5px solid brown;
}

ul {
display: flex;
list-style-type: none;
align-items: stretch;
gap: 20px;
}

li {
border: 0.5px solid black;
border-width: 0 0.5px 0.5px;
border-radius: 0 0 5px 5px;
}

li:hover {
padding-top: 100px;
transition: 0.2s;
}

a {
color: #000;
text-decoration: none;
height: 100%;
display: flex;
align-items: center;
}

Код: Выделить всё

Logo

[list]
[*]
[url=#]Link item[/url]

[*]
[url=#]Link item[/url]

[*]
[url=#]Link item[/url]

[/list]

Подробнее здесь: https://stackoverflow.com/questions/784 ... -trying-to