У вас несколько проблем к ряду, во первых сбросьте стили.

* {
margin: 0;
padding: 0;
text-decoration: none;
}

Хотя бы так. Второе у вас конструкция Html категорически не правильная, прислушайтесь что вам пишут выше. li это элемент списка, ol ul и тп, вы не можете их вставить в отдельный div или же в тег a-href. Судя по всему вам еще рановато вообще что либо писать, изучите матч часть. Не хочу вас обидеть, но таковы реалии, ваш уровень это не уровень новичка, это уровень ничего.

Что бы вам было понятно наверняка: ul - это список, li - это элемент списка, с любым контентом, a это ссылка. В вашем случае в li присутствует контент в виде ссылки a.

Немного не понятно, вы хотите при hover или вы хотите показать пользователю в каком разделе он находится.

Видимо вы хотели так:

.link {
posititon: relative;
}

.link::before {
content: "";

positioan: absolute;
top: -10px;
left: 0;

width: 100%;
height: 2px;

background-color: red;

opacity: 0;
transform: translate-y(-10px);
transition: 0.3s all ease;
}

.link:hover::before {
opacity: 1;
transform: translate-y(0);
}

Если нет, а только при нажатии на текст, то через js. Текст и ссылки это разные вещи.

Не понятно, вы хотите убрать нижний скролл? Если да, то position: relative; задаете родительскому меню и absolute дочернему, в последствии выводить его при :hover.

Вообще это плохая практика со скролом, попробуйте вывести полный список ввиде общей плашки с высотой max-content. Пользователь может уже подзабыть первый пункт меню пока мотает до последнего, а это может повлиять на поведенческий фактор.

И еще ваш выпадающий список со скроллом по оси y обвёрнут дивом, вы можете убрать его и задать ul списку псевдоелемент с прозрачностью определённой высоты, таким образом вы уберете дополнительный тег из разметки и избежите "пропадания" этого ul списка при наведении за границу li или в промежуток между li и выдающим ul.

Помучайте этот тег немного text-overflow.