Николай

Чтобы псевдоэлемент реагировал на изменения размеров и т.п, добавьте "блочность" ему display: block

Полоса прокрутки вроде как, по стилям вот так вычислил.

Так вы задайте свойства

#header_nav
    display: flex;
    align-items: center;

Или что именно, вы хотели?!

ul {
display: flex;
flex-wrap: wrap;
width: 100%
};
.categ-item--link {
flex: 0 0 calc(100%/3);
}
@media screen and (max-width: 1900px)
.categ-item--link {
flex: 0 0 calc(100%/2);
}

Как вариант, у блока на который наводим указать в стилях position: relative, а блоку который появляется left: 50% и transform: translateX(-50%)

Есть только разница в прочтении скринридерами сайта твоего, в случае, если ul оборачивать, то он озвучит, что будет какой-то список и когда закончатся ссылки так же скажет про конец списка. А так он будет просто говорить какие ссылки он видит и человек плоховидящий не особо поймет куда он попал