How can i make anchor tags clickable when using the function z index

the nav is set absolute to the headerContainer. And in motion it works fine. It needs to drop from behind the headerContainer over the main content of the page. This way the content dissapears and the menu is on top. I have done so by setting my main class to relative and a negative z-index: 2; because the nav is set to negativ -1;

Right now everything works and it looks good. The only problem is that the anchor tags inside my nav are not clickable anymore.

I have been searching for the answer but could not find anything related. Is there anyone who can tell me why this occurs? I have yet to find a good solution for this.

What i want to happen seems so simple.. it needs to drop down from behind or at least create the idea its coming from behind the header..

I have tried setting the height of the nav to 0 and on click set it to 100%. That wil drop the menu as if it comes from behind. but gave me other problems like the anchors would come in later or sooner then the actual nav background.

Here is a snippet with the full example.

let Btn = document.querySelector(".menuBtn");
let menu = document.querySelector("nav");
let icon = document.querySelector(".fa-bars");
Btn.onclick = () => {
    menu.classList.toggle("show");
    icon.classList.toggle("fa-times");
}

* {
    margin: 0;
    padding: 0;
}
body {
    background: #F5F5F5;
    color: #1F1F1F;
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
}
a {
    text-decoration: none;
    color: #1F1F1F;
}
/* --- HEADER --- */
header {
    width: 100%;
    height: auto;
    background: #FFF;
}
.headerContainer, .container {
    width: 90%;
    max-width: 1140px;
    margin: auto;
    padding: 15px;
}
.headerContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}
/* --- Logo --- */
.headerBrand a {
    font-size: 2rem;
    font-weight: 800;
    display: flex;
    align-items: center;
}
.headerBrand img {
    padding: 0 15px 0 0;
}
/* --- NAV --- */
header nav {
    z-index: -1;
    /* display: none; */
    padding: 15px;
    width: calc(100% - 30px);
    position: absolute;
    top: -100px;
    left: -1px;
    background: #ffffff;
    transition: top 2s;
}
header nav.show {
    top: 100%;
}
header nav ul.mainMenu {
    list-style: none;
}
header nav ul li a:hover {
    color: red;
}
.menuBtn {
    width: 35px;
    height: 35px;
    text-align: center;
    background: red;
    font-size: 25px;
    border-radius: 5px;
    cursor: pointer;
    color: #FFF;
}
/* --- MAIN --- */
main {
    position: relative;
    z-index: -2;
}

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/a9b20b17fc.js" crossorigin="anonymous"></script>
 <!-- header-->
        <header>
            <div class="headerContainer">
                <!-- Logo or Brandname -->
                <div class="headerBrand">
                    <a href=""><img src="https://krijgeronline.nl/assets/img/logo.png" width="auto" height="80px"> Logo text</a>
                </div>
                <!-- END Logo -->
                <!-- Nav -->
                <nav>
                    <ul class="mainMenu">
                        <li><a href="#">First link</a></li>
                        <li><a href="#">Second link</a></li>
                        <li><a href="#">Thirth link</a></li>
                        <li><a href="#">Fourth link</a></li>
                    </ul>
                </nav>
                <div class="menuBtn"><i class="fas fa-bars"></i></div>
                <!-- END Nav -->
            </div>
        </header>
        <!-- END header-->
        <!-- Main -->
        <main class="container">
            <section>
                <h1>This is a header</h1>
                <p>This is some text</p>
                <p>This is some text</p>
                <p>This is some text</p>
                <p>This is some text</p>
                <p>This is some text</p>
                <p>This is some text</p>
            </section>
        </main>
        <!-- END Main-->

from How can i make anchor tags clickable when using the function z index