CSS I cannot make an item to go behind another item

Question

I am trying to make a navbar dropdown. And I am experiencing this issue.

This is the navbar that is dropped down, however, during the dropdown the blue banner got covered by my pink pinkdown menu.

Here is the dropdown menu during it's animation

My html and css for these 2 component is like this, may I know if anyone knows how can i make the pink dropdown menu go behind the green banner? Thanks!

    <nav className="nav-main">
      <div className="nav-spacer-side"></div>
      <img src={jssLogo} alt="JSS Logo" className="nav-org-logo"></img>
      <div className="nav-spacer-center"></div>
      <ul className="nav-menu">
        <li className="nav-item">About</li>
        <li className="nav-item">Sub-Club</li>
        <li className="nav-item">Events</li>
        <li className="nav-item">Sponsors</li>
        <li className="nav-item">Contact</li>
      </ul>

      <div className="nav-spacer-side"></div>

      <div className="nav-burger" onClick={toggleBurger}>
        <span className="nav-burger-bar"></span>
        <span className="nav-burger-bar"></span>
        <span className="nav-burger-bar"></span>
      </div>
    </nav>

.nav-main {
    position: fixed;
    top:0;
    z-index: 1;
    padding: 6px;
    width: 100vw;
    height: 60px;
    display: flex;
    flex-direction: row;
    background-color: green;
}

.nav-menu {
    width: 100vw;
    margin: 0px;
    padding: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    top: -300px;
    border: 1px solid black;
    background-color: pink;
    z-index: -1;
    transition: 2s;
}