Почему submenu работает неправильно?

Question

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

Всем привет!

Только-только решил свой прошлый вопрос с сабменю, а сюрпризы не кончились.

Суть вопроса: почему активный класс присваивается двум div'ам, если курсор наводится снизу вверх. работает нормально, если курсор наводится сверху вниз и как это все исправить, чтобы активный класс присваивался одному блоку, независимо от траектории наведения мыши?

вот js-код:

let menuBtns = document.getElementsByClassName("menu-btn");
let main = document.getElementById("main");
let about = document.getElementById("about");
let gallery = document.getElementById("gallery");
let forWomen = document.getElementById("forwomen");
let forMen = document.getElementById("formen");
let baby = document.getElementById("baby");
let blog = document.getElementById("blog");
let mainSub = document.getElementById("main-sub");
let aboutSub = document.getElementById("about-sub");
let gallerySub = document.getElementById("gallery-sub");
let forWomenSub = document.getElementById("forwomen-sub");
let forMenSub = document.getElementById("formen-sub");
let babySub = document.getElementById("baby-sub");
let blogSub = document.getElementById("blog-sub");
let timeout = null;
let subMenu = document.getElementsByClassName("sub-nav");
var i;

$(menuBtns).mouseenter (function(){
    this.className += " active";
    if (main.classList.contains("active")) {
        mainSub.classList.add("active");
    }
    if (about.classList.contains("active")) {
        aboutSub.className += " active";
    }
    if (gallery.classList.contains("active")) {
        gallerySub.className += " active";
    }
    if (forWomen.classList.contains("active")) {
    forWomenSub.className += " active";
    }
    if (forMen.classList.contains("active")) {
    forMenSub.className += " active";
    }
    if (baby.classList.contains("active")) {
    babySub.className += " active";
    }
    if (blog.classList.contains("active")) {
    blogSub.className += " active";
    }
}).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)    
})

$(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)
})

и, собственно, html,css

<div class="flex nav-wrapper">
                    <ul class="nav-list">
                        <li><a href="#" target="_blank" rel="noopener noreferrer"  class="menu-btn" id="main"><span id="home-page">Главная</span></a></li>
                        <li><a href="#" target="_blank" rel="noopener noreferrer"  class="menu-btn" id="about"><span id="about-page">О нас</span></a></li>
                        <li><a href="#" target="_blank" rel="noopener noreferrer"  class="menu-btn" id="gallery"><span id="gallery-page">Галерея</span></a></li>
                        <li><a href="#" target="_blank" rel="noopener noreferrer"  class="menu-btn" id="forwomen"><span id="for-women-page">Для женщин</span></a></li>
                        <li><a href="#" target="_blank" rel="noopener noreferrer"  class="menu-btn" id="formen"><span id="for-men-page">Для мужчин</span></a></li>
                        <li><a href="#" target="_blank" rel="noopener noreferrer"  class="menu-btn" id="baby"><span id="for-children-page">Десткое</span></a></li>
                        <li><a href="#" target="_blank" rel="noopener noreferrer"  class="menu-btn" id="blog"><span id="blog-page">Новости</span></a></li>
                    </ul>
                </div>
                <div class="flex sub-nav-main-wrapper sub-nav" id="main-sub"></div>
                <div class="flex sub-nav-about-wrapper sub-nav" id="about-sub"></div>
                <div class="flex sub-nav-gallery-wrapper sub-nav" id="gallery-sub"></div>
                <div class="flex sub-nav-forwomen-wrapper sub-nav" id="forwomen-sub"></div>
                <div class="flex sub-nav-formen-wrapper sub-nav" id="formen-sub"></div>
                <div class="flex sub-nav-baby-wrapper sub-nav" id="baby-sub"></div>
                <div class="flex sub-nav-blog-wrapper sub-nav" id="blog-sub"></div>

.nav {
    width: 100%;
    height: auto;
}

.nav-wrapper {
    width: 100%;
    height: 40px;
    margin: 0 auto;
}

.nav-list {
    display: flex;
    width: fit-content;
    margin: 0;
    margin-left: auto;
    margin-right: auto;
    align-self: center;
}

.nav-list li {
    margin: 0;
    padding: 0 30px;
    text-align: center;
    font-size: 18px;
}

.nav-list li a {
    position: relative;
}

.nav-list li a::after {
    background-color: #CD7F32;
    display: block;
    content: "";
    height: 1px;
    width: 0%;
    left:50%;
    position:absolute;
    -webkit-transition: width 0.3s ease-in-out;
    -moz--transition: width 0.3s ease-in-out;
    transition: width 0.3s ease-in-out;
    -webkit-transform:translateX(-50%);
    -moz-transform:translateX(-50%);
    transform:translateX(-50%);
}

.nav-list li a:hover::after {
    width: 100%;
}

/* sub menu */

.sub-nav-main-wrapper, .sub-nav-about-wrapper, .sub-nav-gallery-wrapper, .sub-nav-forwomen-wrapper, 
.sub-nav-formen-wrapper, .sub-nav-main-wrapper, .sub-nav-baby-wrapper, .sub-nav-blog-wrapper{
    width: 100%;
    height: 0;
    background-color: slategrey;
    transition: 0.5s ease-in-out;
}

.sub-nav-main-wrapper.active, .sub-nav-about-wrapper.active, .sub-nav-gallery-wrapper.active, .sub-nav-forwomen-wrapper.active, 
.sub-nav-formen-wrapper.active, .sub-nav-main-wrapper.active, .sub-nav-baby-wrapper.active, .sub-nav-blog-wrapper.active {
    height: 200px;
}

/* sub menu end */

весь проект можно посмотреть тут.

Пожалуйста, не кидайтесь тапками, я только начинаю познавать прелести вашего веб-мира.