В раскрывающемся меню отображается только один элемент списка при наведении на родительский элемент

Question

Я тестирую доступное выпадающее меню на основе шаблона flex, и у меня возникает следующая проблема: у меня есть элемент div, классифицированный как «menu-item-has-children», который при добавлении в класс добавляет класс в подменю, которое будет показано. У меня есть класс в каждом из div и подменю, и я знаю, что при их выборе они возвращают список узлов. При добавлении прослушивателя событий у меня есть al oop для добавления прослушивателя к каждому элементу в списке узлов. Когда это событие происходит, я хочу, чтобы отображалось только дочернее подменю этого конкретного элемента. Теперь, только первое подменю отображается при вставке в любой из элементов, относящихся к классу menu-item-has-children. Я знаю, что мне не хватает другого l oop или чего-то в контексте этого. Любая помощь будет принята с благодарностью!

HTML `

        <div class="branding">
            <a href="/"><img id="logo" src="logo.png" alt="Joyce Inc. logo" aria-label="link to Joyce Inc. home"></a>
        </div>


        <button aria-expanded="false" role="mobile-menu" class="nav-mobile" id="toggle-menu">
           <span></span></button>
        <nav class="main-navigation">

            <ul class="menu" id="nav">
                <li class="menu-item">
                    <a href="#">Home</a>
                </li>
                <li class="menu-item">
                    <a href="#">About</a>
                </li>
                <li class="menu-item menu-item-has-children" aria-haspopup="true"><div class="menu-category" tabindex="0">Services</div>
                    <ul class="sub-menu">
                        <li class="sub-menu-item">
                            <a href="#">Plumbing</a>
                        </li>
                        <li class="sub-menu-item">
                            <a href="#">Heating</a>

                        </li>
                        <li class="sub-menu-item">
                            <a href="#">Electrical</a>
                        </li>
                        <li class="sub-menu-item">
                            <a href="#">Oil</a>
                        </li>

                        <li class="sub-menu-item">
                            <a href="#">Salads</a>
                        </li>
                    </ul>
                </li>
                <li class="menu-item">
                    <a href="#">Pricing</a>
                </li>
                <li class="menu-item menu-item-has-children" aria-haspopup="true"><span class="menu-category" tabindex="0">2nd drop</span>
                    <ul class="sub-menu">
                        <li class="sub-menu-item">
                            <a href="#">Plumbing</a>
                        </li>
                        <li class="sub-menu-item">
                            <a href="#">Heating</a>

                        </li>
                        <li class="sub-menu-item">
                            <a href="#">Electrical</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>

</div></header>

var query = document.querySelector.bind (document); var queryAll = document.querySelectorAll.bind (document);

    var menu = query(".menu");
        mainNavigation = query(".main-navigation"),
        menu = query(".menu"),
        menuItem = query('#nav > li'),
        subMenu = queryAll(".sub-menu"),
        menuCategory = query(".menu-category"),
        menuItemHasChildren = queryAll(".menu-item-has-children"),
        toggleMenu = query("#toggle-menu"),
        focusElements = queryAll(".sub-menu-item");

function dropDownMenu(){

    for (var i=0; i < menuItemHasChildren.length; i++){
        menuItemHasChildren[i].addEventListener("mouseenter", function(){
            subMenu[0].classList.add("submenu-show");
            menuCategory.classList.add("rotate");
        })

    } 
    for (var i=0; i < menuItemHasChildren.length; i++){
        menuItemHasChildren[i].addEventListener("mouseleave", function(){

            subMenu[0].classList.remove("submenu-show");
            menuCategory.classList.remove("rotate");
            })

}

}