z-index is being ignored

Question

I have a nav dropdown menu. I want the dropdown items to come from behind the menu. But the dropdown always comes from over the menu. No matter what z-index I put. I searched and almost all of the similar issues came from elements that where not positioned, but mine are. Here is the HTML of the menu component (<MenuItem />)

 <div>
                <div className={styles.dropdown}>
                    <div className={styles.dropbtn}>Bio</div>

                    <div className={styles.dropdownContent}>
                        <Link href="/biography">Biographie</Link>
                        <Link href="/albums">Discographie</Link>
                        <Link href="#">Télé/Films</Link>
                        <Link href="/games">Jeux vidéos</Link>


                    </div>
                </div>
                <div className={styles.dropdown}>
                    <div className={styles.dropbtn}>Média</div>

                    <div className={styles.dropdownContent}>
                        <Link href="/media/videos">Vidéos</Link>
                        <Link href="/media/gallery">Photos</Link>
                        <Link href="#">Musique</Link>
                    </div>

                </div>
                <div className={styles.dropdown}>
                    <div className={styles.dropbtn}>Pédagogie</div>

                    <div className={styles.dropdownContent}>
                        <Link href="/methods">Méthodes</Link>
                        <Link href="#">Internet</Link>
                        <Link href="#">Journaux</Link>
                    </div>


                </div>

                <LanguageSwitcher/>


            </div>

and here is my topmenu

<nav className={styles.menu}>
            <Link href={'/'}>
                <div className={styles.logoContainer}>
                    <div className={styles.logo}>Chris Rime<Image
                        src={'/images/bg/waveform.svg'}
                        width={100}

                    /></div>
                </div>

            </Link>


    


            <div className={styles.menuContainer}>
                {!matches ? (
                    <Image src={'/images/icons/musicburger.svg'} style={{cursor: 'pointer'}} width={30}
                           onClick={() => setOpened((o) => !o)}
                    />
                ) : (
                    <div className={styles.menuItems}>
                        <MenuItems/>
                    </div>


                )}


            </div>

        </nav>

and here is my CSS

.menu {
    position:fixed;
    z-index:5;
    top:0;
    width:100%;
    height:75px;
    display: flex;
    gap: 20px;
    justify-content: flex-end;
    transition: 0.4s;
    background-color: var(--secondary);
    border-bottom: 1px solid var(--accent);

}


.dropdown {
    /*position: relative;*/
    display: inline-block;
    transition: 0.3s;

}

.dropdownContent {
    animation: dropBack 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    display: none;
    position: absolute;
    background-color: var(--accent);
    width:100vw;
    left:0;
    box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    z-index:6

}




.dropdownContent  a {
    color: var(--primary);
    padding: 12px 16px;
    text-decoration: none;
    transition: 0.3s;
    display: block;

}



.dropbtn {
    height: 100%;
    color: white;
    width:100%;

    padding: 16px;
    border: none;
    cursor: pointer;
    transition: 0.3s;
    border-radius: 0 10px 0 10px;
    font-size : 30px;
    list-style-type: none;
    font-family: 'Nanum Gothic', sans-serif;
    display: flex;
    justify-content: space-around;
    /*align-items: center;*/

}

.dropbtn span {
    font-size: 0.4em;
    padding: 10px;
}

.dropdownContent  a:hover {
    background-color: var(--accent)

}

.dropdown:hover .dropdownContent  {
display: flex;
    justify-content: flex-end;
transition: top 1s linear;
    animation: dropdownContent 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both
}

I created a codepen here to replicate the issue

https://codepen.io/Altho/pen/zYpLMzj

Answer 1

Try making the parent class position:"relative" and the inside class position:"absolute' then apply z-index