sub-menu sitting behind other menu-items

I have created a dropdown menu that is 100vw and 60vh.
I have a list of menu items, and when you click on a parent item (with a sub-menu), I want the sub-menu to slide in from offcanvas and sit on top of the previous menu.

I’ve got to a certain point, however the sub-menu that is supposed to be on the very top is sitting behind SOME of the menu-items.

The z-index doesn’t seem to do it, and I’m at a bit of a loss and spent way too much time not figuring this out.

Here is what I have:

WordPress HTML setup:

<?php header_menu();?>

<div class="head__left--navigation">
  <a class="burger-btn"></a>
               
  <div class="nav-container">
    <div class="head__left--logo menu-logo">
      <a href="<?php echo home_url(); ?>">
        <img class="img" src="<?php echo get_template_directory_uri(); ?>/library/images/logo-white.png" alt="Logo">
      </a>                        
    </div>

    <nav class="head__nav" role="navigation">
      <ul id="primary-menu">
        <li class="menu-item parent">
            <a href="#">Menu Item</a>
            <ul class="sub-menu">
                <li class="sub-menu-item">
                  <a>Sub Menu Item</a>
                </li>
                <li class="sub-menu-item">
                  <a>Sub Menu Item</a>
                </li>
                <li class="sub-menu-item">
                  <a>Sub Menu Item</a>
                </li>
            </ul>
        </li>
        <li class="menu-item parent">
            <a href="#">Menu Item</a>
            <ul class="sub-menu">
                <li class="sub-menu-item">
                  <a>Sub Menu Item</a>
                </li>
                <li class="sub-menu-item">
                  <a>Sub Menu Item</a>
                </li>
                <li class="sub-menu-item">
                  <a>Sub Menu Item</a>
                </li>
            </ul>
        </li>
        <li class="menu-item">
          <a href="#">Menu Item</a>
        </li>
        <li class="menu-item">
          <a href="#">Menu Item</a>
        </li>
        <li class="menu-item">
          <a href="#">Menu Item</a>
        </li>
      </ul>
    </nav>
  </div>
</div>

The menu in my functions:

function header_menu() {
	wp_nav_menu(
	array(
		'theme_location'  => 'header-menu',
		'menu'            => '',
		'container_class' => '',
		'container_id'    => '',
		'menu_class'      => 'head__nav_inner',
		'menu_id'         => '',
		'echo'            => true,
		'fallback_cb'     => 'wp_page_menu',
		'before'          => '',
		'after'           => '',
		'link_before'     => '',
		'link_after'      => '',
		'depth'           => 0,
		// 'walker'          => new Clean_Walker_Nav_Menu(),
        'container'       => false,
        'items_wrap'      => '<nav class="head__nav" role="navigation"><ul id="primary-menu">%3$s</ul></nav>'
		)
	);
}

My styles:

&--navigation {
  ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
  }
            
  .burger-btn {
    background: #ffffff;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    position: relative;
    top: 0;
    z-index: 100;
  }

  .nav-container {
    background-color: base-colour(black);
    position: absolute;
    top: 80px;
    left: 0;
    height: 0;
    width: 100vw;
    transition: ease 0.4s;
    display: flex;
    flex-direction: column;
    overflow-y: auto;

    @include bp(min-width break(lg)) {
      position: fixed;
      top: 0;
      overflow-y: hidden;
    }
                
    .menu-logo {
      position: fixed;
      top: 32px;
      left: 64px;
      z-index: 1000;
      display: none;
                    
      img {
        opacity: 0;
      }
    }

    .head__nav {
      background-color: base-colour(black);
      background: pink;
      position: relative;
      top: -100vh;
                    
      @include bp(min-width break(lg)) {
        height: 60%;
      }
                    
      ul {
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        columns: 2;
      }
                    
      .sub-menu {
        // display: none;
        background: green;
        columns: 1;
      }
    }
                
    // menu footer
      .menu-footer {
      background-color: base-colour(white);
      position: relative;
      bottom: -100vh;
      transition: ease 0.4s;

      @include bp(min-width break(lg)) {
        height: 40%;
        overflow: hidden;
      }
                    
      .foot {
        padding: spacing(lg) spacing(md);
                        
        @include bp(min-width break(sm)) {
          padding: spacing(lg);
          height: auto;
        }
                        
        @include bp(min-width break(md)) {
          position: relative !important;
          top: 50%;
          transform: translateY(-50%);
        }
                    
        @include bp(min-width break(lg)) {
          width: 100%;
          margin: 0;
        }

        @include bp(min-width break(xxl)) {
          padding: spacing(xl) 190px;
        }
                        
        &__social,
        &__details,
        &__info {
          opacity: 0;
          margin: 0;
          margin: 0 0 16px 0;
        }
                        
        &__info {
          margin-bottom: 0;
                            
          &--copyright {
            @include bp(max-width break(lg)) {
              display: none;
            }
          }

          &--links {
            @include bp(max-width break(lg)) {
              display: none;
            }
          }
        }

                        
        &__details {
          .menu-newsletter {                                
            @include bp(min-width break(sm)) {
              display: block;
            }
          }

          .footer-newsletter {
            display: none;
          }
        }
      }
    }
  }
}

I hope this makes sense and would really appreciate some help ??