I'm facing an issue with my navigation dropdown menu. I want the dropdown items to appear from behind the menu, but they always come from the top. I've tried adjusting the z-index but it doesn't work. I've checked similar problems online, and most of them were due to elements not being positioned correctly, but mine are. Here's the HTML for the menu component (<MenuItem />)
<div>
<div className={styles.dropdown}>
<div className={styles.dropbtn}>Bio</div>
<div className={styles.dropdownContent}>
<Link href="/biography">Biography</Link>
<Link href="/albums">Discography</Link>
<Link href="#">TV/Films</Link>
<Link href="/games">Video Games</Link>
</div>
</div>
<div className={styles.dropdown}>
<div className={styles.dropbtn}>Media</div>
<div className={styles.dropdownContent}>
<Link href="/media/videos">Videos</Link>
<Link href="/media/gallery">Photos</Link>
<Link href="#">Music</Link>
</div>
</div>
<div className={styles.dropdown}>
<div className={styles.dropbtn}>Pedagogy</div>
<div className={styles.dropdownContent}>
<Link href="/methods">Methods</Link>
<Link href="#">Internet</Link>
<Link href="#">Journals</Link>
</div>
</div>
<LanguageSwitcher/>
</div>
Here's the code for my top menu
<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's my CSS styles
.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've set up a codepen to demonstrate the issue