Держите: https://jsfiddle.net/Lbey391p/10/

По производительности utf8mb4_unicode_ci немного медленнее, однако он надежнее и используется в документации (https://laravel.com/docs/8.x/database#configuration)

Пропишите к тегу a/li внутри меню свойство line-height: (высота меню)px; либо же примените к ul свойство align-items: center

Используя js создайте асинхронную функцию SetTimeout внутри той функции, что отвечает за обработку нажатия на текст. Первым аргументом передайте callback функцию и внутри сделайте присваивание класса (любого, он понадобится вам позже) фону. Вторым аргументом в нее передайте в миллисекундах значение за которое исчезает текст (transition что вы указали в css тексту). Ну а дальше на css добавьте фону transition для плавности и через селектор .[класс фона].[класс что вы присваиваете в js, сделайте к примеру width: 0 (фон будет справа на лево уходить) или height: 0 (снизу вверх), тут уже как захотите.

Изменено: вот на jsFiddle то, о чем писал выше https://jsfiddle.net/gLsbf5e4/