Егор Живагин

Конечно, чем меньше фреймворков - тем лучше, но ты реально повторяешь функционал slick . Я один раз пилил такой же велосипед. Ничего хорошего не вышло) Собственно, на этой же проблеме остановился и задолбался писать костыли

JS работает в браузере и, если хочется, на сервере (Нода). Делайте выводы)
React Native в помощь

$('.submenusty').hover(function () {
    $(this).css('background-color', '#f0f2f5');
},
function() {
    $(this).css('background-color', 'white');
});

Я не знаю, зачем ты одному и тому же объекту два фоновых цвета задаёшь, но это меня не касается)) Принцип понятен?
И, пожалуйста, расставляй отступы

Три разных события
Улетают в JS . Да, в переменную, скорее всего.

"transition-delay тут не работает."
Честно говоря, мне лень проверять сейчас в codepen, но такие слова кажутся преждевременными.

transition-delay
"Допустимо указывать несколько значений, перечисляя их через запятую. Каждое значение будет применяться к свойству, заданному в параметрах transition-property."
transition-property

Пробуйте

UPD
Я понял проблему. Можно попробовать вынести анимации в @keyframes