Why is submenu not working properly?

Question

JavaScript

Hello!

Just solved my last question with the submenu , but the surprises are not over.

The essence of the question: why is the active class assigned to two divs if the cursor is hovered from the bottom up. works fine if the cursor is hovered from top to bottom, and how can I fix this so that the active class is assigned to one block, regardless of the mouse hover path?

here is the js code:

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

and, in fact, 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 */

the entire project can be viewed here .

Please don't throw your slippers, I'm just starting to learn the charms of your web world.