How can I get my menu inside of a menu to function properly?

[Atman Atos]

My sub-menus can not retain their class to keep displaying when the close toggle is clicked. They will close and open as long as it is done in sequence.
sequence A
1. Click open menu
2. Click on sub-menu = Content appears

sequence B
1. Click on sub-menu = Content disappears
2. Click close menu

But, if the sub-menu is not closed before the Close menu is clicked, it will stop display and sequence A can not be repeated. It works well on desktop, on mobile, it doesn't. Here is my code. What's the solution?

const showExtraMenus = document.querySelector('.show-extra-menus');
const extraMenus = document.querySelector('.extra-menus-section');

dropdown = () => {
  if (extraMenus.classList.contains('show-extra-menus')) {
    extraMenus.classList.remove('show-extra-menus')
  } else {
    extraMenus.classList.add('show-extra-menus')
  }
}
showExtraMenus.addEventListener('click', dropdown);

.home-header .nav-section .div-one .logo{
    width: 100px;
    height: 50px;
    display: flex;
    margin-left: 3rem;
}

header{
    border: 1px dotted white;
    background-color: white;
    min-height: 70px;
    /*height: fit-content;*/
    position: fixed;
    top: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 1;
    text-transform: capitalize;
}

.mobile-menu{
    display: none;
}

.nav-section{
    display: flex;
    background-color: transparent;
    width: 100%;
    gap: 2rem;
    height: fit-content;
    box-sizing: border-box;
    align-items: center;
}

.nav-section .responsive{
    display: flex;
    gap: 2rem;
}

.space-taker{
    height: 68px;
}

.extra-menus-section{
    height: fit-content;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    border: 1px solid #f6f6f7;
    padding: 1.5rem;
    background-color: #f6f6f7;
}

.extra-menus{
    display: flex;
    gap: 3rem;
    margin: 0% 10rem;
    padding: 1rem;
    width: 100%;
    box-sizing: border-box;
    z-index: 1;
    justify-content: space-between;
}

.extra-menus div a{
    color: black;
    text-decoration: none;
    text-transform: capitalize;
    font-size: 16px;
}

.extra-menus div{
    position: relative;
}

.extra-menus div a span{
    position: absolute;
    bottom: -2px;
    left: -2rem;
    font-size: 24px;
}

img{
    height: 50vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100%;
    z-index: 0;
}

.banner-text{
    background-image: url('homeimg.png');
    height: 60vh;/*60*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
}

.outward-span-of-typing{
    position: absolute;
    bottom: 20%;
    left: 10%;
    font-size: 3rem;
}

.visible-menu-text h3{
    cursor: pointer;
}

.extra-menus-section{
    display: none;
}

.extra-menus-section.show-extra-menus{
    display: flex;
}

.div-two{
    margin-left: 3rem;
}

.div-two .visible-menu-text{
    position: relative;
}

.div-two .visible-menu-text h3:hover{
    color: rgb(11, 230, 11);
}

.div-two .visible-menu-text .material-icons{
    position: absolute;
    bottom: 0;
}

.nav-section .nav-gallary{
    margin-left: 1rem;
}

.nav-section .nav-gallary a{
    color: black;
    text-decoration: none;
}

.nav-section .nav-gallary a:hover{
    color: rgb(11, 230, 11);
}

.nav-section .about-us a{
    color: black;
    text-decoration: none;
}

.nav-section .about-us a:hover{
    color: rgb(11, 230, 11);
}
@media (max-width: 900px) {
    .nav-section .responsive{
        display: none;
    }
    .mobile-menu{
        display: inline;
        position: absolute;
        right: 1rem;
        top: 1.5rem;
        cursor: pointer;
    }
    .mobile-menu.responsive{
        display: block;
        position: relative;
        box-sizing: border-box;
    }
    .nav-section{
        display: block;
        text-align: center;
    }
    .extra-menus-section{
        border: 1px solid green;
        line-height: 1rem;
        text-align: center;
    }
    .home-header .nav-section .div-one{
        display: flex;
    }

    .home-header .nav-section .div-one .logo{
        width: 80px;
        height: 40px;
        margin-left: 1rem;
        margin-top: 0.7rem;
    }

    .extra-menus-section .extra-menus{
        display: block;
        border: 1px solid red;
        width: fit-content;
        margin: 1rem auto;
        text-align: left;
    }
    .extra-menus-section .extra-menus div a{
        line-height: 2rem;
    }
    .extra-menus div a span{
        bottom: 5px;
    }
}

<body class="home-body">
        <header class="home-header">
            <section class="nav-section">
                <div class="nav-items">
                    <div class="div-one">
                        <a href=""><img class="logo" src="logo.jpg" alt="Logo"></a>
                    </div>
                </div>
                <section class="responsive">
                    <div class="div-two">
                        <div class="visible-menu-text">
                            <h3 class="show-extra-menus">See more<span class="material-icons">expand_more</span></h3>   
                        </div>   
                    </div>   
                    <div class="nav-gallary">
                        <a href=""><h3>item 1</h3></a>
                    </div>
                    <div class="about-us">
                        <a href=""><h3>item 2</h3></a>
                    </div>
                </section>
            </section>
            <div class="mobile-menu"><span class="material-icons">menu</span></div>
            <div class="extra-menus-section">
                <div class="extra-menus">
                    <div>
                      <a href="#"><span class="material-icons">lock</span>sub item 1</a>
                    </div>
                    <div>
                      <a href="#"><span class="material-icons">light_mode</span>sub item 2</a>
                    </div>
                    <div>
                      <a href="#"><span class="material-icons">volume_up</span>sub item 3</a>
                    </div>
                    <div>
                      <a href="#"><span class="material-icons">movie</span>sub item 4</a>
                    </div>
                    <div>
                      <a href="#"><span class="material-icons">business_center</span>sub item 5</a>
                    </div>
                    <div>
                      <a href="#"><span class="material-icons">fence</span>6</a>
                    </div>
                </div> 
            </div>
        </header>
</body>

 

[Kuncode]

The issue is that the class show-extra-menus is being added and removed to the wrong element. It should be added/removed to the parent element, which is .extra-menus-section, instead of extraMenus which is the .extra-menus-section itself. Change the following line in your JavaScript:

extraMenus.classList.contains('show-extra-menus')

to:

extraMenus.parentElement.classList.contains('show-extra-menus')

And change these lines:

extraMenus.classList.remove('show-extra-menus')
extraMenus.classList.add('show-extra-menus')

to:

extraMenus.parentElement.classList.remove('show-extra-menus')
extraMenus.parentElement.classList.add('show-extra-menus')