Sous menu barre de navigation

Bonjour, je rencontre un problème avec ma barre de navigation. En effet, lorsque je passe la souris sur mon li "Genres" ça m'ouvre mon sous menu. Le problème c'est que je n'arrive pas à atteindre les différentes catégories et ce dernier se déroule en dessous du slider que j'ai mis dans ma page index. J'ai essayé de mettre des z-index pour régler le problème de superposition mais rien n'y fait. Quant au problème d'atteindre les li du sous menu, je n'y arrive pas car le sous menu se ferme... J'ai beau modifier des trucs dans mon code rien ne se passe ? J'ai vraiment besoin d'aide !

Je précise que ce code n'est absolument pas fait par un professionnel ni même pas de réels passionnés de code. Nous sommes seulement des élèves en apprentissage !

Merci à vous

"HTML + PHP"

<header>
        <div class="menu">
          <span class="bar"></span>
        </div>
        <nav>
          <div class="nav-container">
            <div class="logo">
              <a href="index.php"><img src="https://media.discordapp.net/attachments/1091245398426927164/1094973573141115053/CinemaChronicles.png?width=1440&height=512" alt="logo"></a>
            </div>
            <ul>
              <li><a href="#">Genres</a>
                  <ul class="sous">
                  <?php 
      $dbh = new PDO('mysql:host=localhost;dbname=sae203;charset=utf8', 
            'root', 
            '');
            $sth = $dbh->prepare('SELECT idGenre,libelle FROM genre');
            $sth->execute();
            $result = $sth->fetchAll();
            foreach($result as $row){
                echo "<li><a href='genres.php?cat=".$row["idGenre"]."'>".$row["libelle"]."</a></li>"
            ;}
      ?>
                  </ul>
              </li>
              <li><a href="nouveaux.php">Nouveautés</a></li>
              <li><a href="mieux_notes.php">Mieux notés</a></li>
              <li><a href="nouveau_film.php">Ajouter un film</a></li>
              <li> <form action="reponse.php" method="POST">
                  <input type="search" placeholder="Rechercher un film.." name="searchbox" id="searchbox">
                  <input type="submit" value="→"></form>
            </ul>
          </div>
          <script>
  var isActive = false;

let menu = document.querySelector('.menu')
menu.addEventListener('click', afficherMenu)
function afficherMenu() {
    if (isActive){
        menu.classList.remove("active")
        document.querySelector('body').classList.remove('menu-open')
    } else {
        menu.classList.add("active")
        document.querySelector('body').classList.add('menu-open')
    }
    isActive = !isActive
}
</script>
        </nav>
      </header>

 "CSS de la barre de navigation"

   header{
    width: 100%;
    height: 14vh;
    position: relative;
    background-color: transparent;
    }
    html{
    font-size: 10px;
    }
    .menu{
    display: none;
    }
    .main-text{
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #333;
    font-family: "Lato", sans-serif;
    text-transform: uppercase;
    letter-spacing: 3px;
    z-index: 9999999;
    }
    nav{
    width: 100%;
    height: 10rem;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 1.7rem;
    font-weight: bold;
    line-height: 11rem;
    box-shadow: 0 0 1rem rgb(255,255,94);
    background-color: rgb(255,255,94);
    color: black;
    }

    .logo{
    float: left;
    margin-top: 1.5rem;
    }

    .logo img{
    margin-left: 3rem;
    width: 143.5px;
    height: 50.5px;
    }

    nav ul{
    list-style: none;
    float: right;
    }

    nav ul li{
    display: inline-block;
    padding: 0 1rem;
    justify-content: center;
    transition: opacity .3s;
    position: relative;
    text-transform: uppercase;
    }

    nav ul li:hover {
    opacity: 0.7;
    }

    nav ul li:hover ul {
    display: block;
    }

    nav ul .sous {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    }

    nav ul .sous li {
    display: block;
    padding: 5rem;
    background-color: rgb(255,255,94);

    }

    nav ul .sous li a {
    color: #333;
    }

    nav ul li a{
    text-decoration: none;
    color: #333;
    }

    nav ul li .sous {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    }

    nav ul li:hover .sous {
    display: block;
    }

    nav ul li .sous li {
    display: block;
    padding: 1rem;
    background-color: rgb(255,255,94);
    } 
nav ul li .sous li a {
    color: #333;
    }

@media screen and (max-width: 900px){
  .logo{
    float: center;
    margin-top: 1.5rem;
    }
  .menu{
    display: block;
    position: fixed;
    width: 3rem;
    height: 3rem;
    top: 3rem;
    right: 3rem;
    z-index: 999;
    cursor: pointer;
  }

  .bar,
  .bar::before,
  .bar::after{
    position: absolute;
    background-color: rgb(131, 131, 131);
    margin: auto;
    width: 100%;
    height: 3px;
    content: "";
    top: 50%;
    left: 0;
    transition: all .4s;
  }

  .bar{
    margin-top: -2px;
  }

  .bar::before{
    top: -1.2rem;
  }

  .bar::after{
    top: 1.2rem;
  }

  .bar::before,
  .bar::after{
    transform: rotate(0deg);
  }

  .active .bar{
    background-color: transparent;
  }

  .active .bar::before{
    transform: rotate(45deg);
  }

  .active .bar::after{
    transform: rotate(-45deg);
  }

  .active .bar::before,
  .active .bar::after{
   top: 0;
  }

  nav{
    width: 25rem;
    height: 100%;
    background-color: rgb(255, 255, 94);
    position: fixed;
    transform: translateX(-50rem);
    z-index: 998;
    line-height: 1;
    font-size: 2.5rem;
    transition: transform .6s cubic-bezier(0.56, 0.1, 0.34, 0.91);
  }
  .menu-open nav{
    transform: translateX(0);
  }
  nav ul{
    width: 100%;
    text-align: center;
    padding-top: 10rem;
  }
  nav ul li{
    display: block;
    padding: 2rem 1rem;
}
}

Ce que je veux

Un sous menu fonctionnel où je peux atteidre toutes les propositions de ce dernier

Ce que j'obtiens

Un sous menu qui se met sous mon slider et où le sous menu n'est pas atteignable sauf pour la première option.