sub-menu werkt maar 1 keer.

Het sub-menu wat ik heb gemaakt werkt alleen bij de eerste keer klikken daarna niet meer.
Heb al vergeleken met andere menu's met sub-menu's die ik heb gemaakt maar zie niet wat er anders is.
Enige verschil is dat hier een hamburgermenu in zit als je het bekijkt op de telefoon.
En op de telefoon blijft hij wel openstaan.
De website is vanuit 376px opgebouwd naar 1440px.

Mijn vraag is duss of iemand mij kan helpen?

https://jsfiddle.net/g3xwua1p/1/

<button class="hamburger" aria-label="Open navigatie"><span></span></button>
        <nav class="nav nav-panel" aria-label="Hoofdmenu">
          <ul>
            <li><a href="index.html" class="active" aria-current="page">Home</a></li>
            <li><a href="scouting.html">Scouting</a>
              <ul aria-label="submenu Scouting">
                <li><a href="beste-spelers.html">Beste Spelers</a></li>
                <li><a href="beste-staff.html">Beste Staff</a></li>
              </ul>
            </li>
            <li><a href="tactiek.html">Tactiek</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li><button id="theme-toggle" class="hamburger" title="Thema wisselen" aria-label="Thema wisselen"><span></span></button></li>
          </ul>
        </nav>

CSS-code

.nav{
    --link-pad:.6rem .9rem
}

.nav ul{
    list-style:none;margin:0;padding:0
}

.nav a{
    display:block;
    padding:var(--link-pad);
    color:#dfe6ff;
    text-decoration:none;
    font-weight:700;
    font-family:'Montserrat',sans-serif;
    border-radius:8px
}

.nav a:hover,.nav a:focus-visible{
    background:rgba(0,209,255,.12);
    outline:none
}

.nav a.active,[aria-current="page"]{
    background:rgba(90,46,166,.22)
}

.hamburger{
    inline-size:42px;
    block-size:42px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.12);
    border-radius:8px;
    background:#141622;
    color:#fff;
    cursor:pointer
}

.hamburger span{
    inline-size:20px;
    block-size:2px;
    background:#fff;
    position:relative;
    display:block
}

.hamburger span::before,.hamburger span::after{
    content:"";
    position:absolute;
    inline-size:100%;
    block-size:100%;
    background:#fff;
    inset-block-start:-6px
}

.hamburger span::after{
    inset-block-start:auto;
    inset-block-end:-6px
}

.nav-panel{
    display:none;
    padding-inline:clamp(12px,4vw,48px);
    padding-block-end:12px
}

.nav-panel.open{
    display:block
}

.nav>ul>li{
    margin-block:6px

}
.nav li ul{
    display:none;
    margin-block-start:6px;
    padding-inline-start:12px;
    border-inline-start:2px solid rgba(255,255,255,.06)

}

.nav li:focus-within>ul,.nav li:hover>ul{
    display:block

}

.nav li ul a{
    font-weight:600;opacity:.9
}