Михаил Литвинов

проблема решается установкой в body overflow-x: hidden;

Благодаря hzzzzl нашел решение:

Сначала ввел новую переменную

let subMenu = document.getElementsByClassName("sub-nav");

После, с помощью JQuery пишем функцию

$(subMenu).mouseenter (function(){
    clearTimeout(timeout);
}).mouseleave (function (){
    timeout = setTimeout(() => {
        this.classList.remove("active");
        mainSub.classList.remove("active");
        aboutSub.classList.remove("active");
        gallerySub.classList.remove("active");
        forWomenSub.classList.remove("active");
        forMenSub.classList.remove("active");
        babySub.classList.remove("active");
        blogSub.classList.remove("active");
    }, 100)
})

Тут как раз и определяем, что когда мышь заходит внутрь блока меню, очищаем таймаут, а когда покидает его - устанавливаем в 0.1с.