Ольга Свистунова

Мое решение без трансформаций (хотя я не знаю, может они вам принципиально нужны)

У вас для тега <main> прописано overflow:hidden, а это значит, что браузер не может посчитать, в какой такой момент времени нужно вложенный элемент прилеплять.

Хром добавляет для ссылок outline при состоянии :focus, поэтому добавьте:

main.main ul ul a {
    text-decoration: underline;
    color: #008a0c;
    font-family: "Noto Sans", "Arial";
    outline: none;
}

И будет вам счастье.

Выступлю в роли ванги и предположу, что вы вставляете текст откуда-то (из ворда, например), и в нем вместо пробелов вставлются
 - которые неразрывные пробелы, не дающие тексту разбиваться

На сайте, который вы указали, используется transform: translateY и анимация через transition, почему бы не сделать аналогично?
По умолчанию translateY(100%), при наведении преобразовывается в translateY(0) - вот и вся нехитрая анимация