Erreur de Z-index

bonjour,
j'ai un problème consternant le Z-index de l'élément #hideorshow qui apparaît quand l'écran est petit et que l'on a cliqué sur les trois barres (icone de navigation).
J'aimerais qu'il passe sous la barre de nav quand il apparaît.

Comme le code est assez long voici le
code pen.

Merci d'avance de vos réponces...

Coucou, déplace ce bout de code juste avant ta balise <article> qui contient tout ton text (:

  <div class="hidden" id="hideorshow">
          <a href="#">Outils</a><br>
            <a href="#">staff</a><br>
            <a href="javascript:void(0);" onclick="showlog()">se&nbsp;connecter</a><br>
            <a href="javascript:void(0);" onclick="showsin()">s'enregistrer</a><br>
          <form action="#">
              <input placeholder="chercher..." name="search" style="width: 110px;"></form>
        </div>

merci, ça marche, c'est parfait!!!