Full CSS navigation with dropdown menu – links not working?

I've got this simple Code Snippet for a full css navigation and I'm testing it on my website for responsive view. It includes a dropdown submenu but the links for this won't work and i don't know why.

Here's the code for the burger menu with dropdown: (display: none changes to display: block"

CSS:

.mobile-menu {
    display: none;
}

.mobile-menu nav {
    float: right;
}

.mobile-menu a,div {
    text-decoration: none;
    color: #232323;
    transition: color 0.3s ease;
}

.mobile-menu a:hover {
    color: tomato;
 }

.mobile-menu #menuToggle {
    display: block;
    position: relative;
    top: 30px;
    right: 20px;
    width: 100%;
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
}

.mobile-menu #menuToggle input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;
    cursor: pointer;
    opacity: 0; /* hide this */
    z-index: 2; /* and place it over the hamburger */
    -webkit-touch-callout: none;
}

.mobile-menu #menuToggle span {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    background: #fff;
    border-radius: 3px;
    z-index: 1;
    transform-origin: 4px 0px;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
    background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
    opacity 0.55s ease;
}

.mobile-menu #menuToggle span:first-child {
    transform-origin: 0% 0%;
}

.mobile-menu #menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}

.mobile-menu #menuToggle input:checked ~ span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #232323;
}

.mobile-menu #menuToggle input:checked ~ span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}

.mobile-menu #menuToggle input:checked ~ span:nth-last-child(2) {
    transform: rotate(-45deg) translate(0, -1px);
}

.mobile-menu #menu {
    position: absolute;
    width: 300px;
    margin: -100px 0 0 -50px;
    padding: 50px;
    padding-top: 125px;
    background: #ededed;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    transform-origin: 0% 0%;
    transform: translate(110%, 0);
    right: -20px;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}

.mobile-menu #menu li {
    padding: 10px 0;
    font-size: 22px;
    list-style-type: none;
}

.mobile-menu #menuToggle input:checked ~ ul {
    transform: none;
}

.onclick-menu:focus {
    pointer-events: none;
}

.onclick-menu:focus .onclick-menu-content {
    opacity: 1;
    visibility: visible;
    display: inherit;
    pointer-events: auto;
}

.onclick-menu-content {
   display: none;
    opacity: 0;
    visibility: hidden;
    transition: visibility 0.5s;
}
        
.onclick-menu-content li{
    list-style: none;
}

HTML:

<div class="mobile-menu">

    <nav role="navigation">
    <div id="menuToggle">
        <input type="checkbox"/>

        <span></span>
        <span></span>
        <span></span>

        <ul id="menu">
            <li><a href="index.php">Start</a></li>
            <li class="">
                <div tabindex="0" class="onclick-menu">Über uns
                    <ul class="onclick-menu-content">
                        <li><a href="../ueber-uns.php#geschichte">Geschichte</a></li>
                        <li><a href="../ueber-uns.php#hackerhof">Der Betrieb heute</a></li>
                        <li><a href="../ueber-uns.php#philosophie">Philosophie</a></li>
                    </ul>
                </div>
            </li>
            <li class="">
                <div tabindex="0" class="onclick-menu">Direktvermarktung
                    <ul class="onclick-menu-content">
                        <li><a href="../direktvermarktung.php">Angebot</a></li>
                        <li><a href="../direktvermarktung.php#rindfleisch">Rindfleisch</a></li>
                        <li><a href="../direktvermarktung.php#gefluegel">Geflügel</a></li>
                        <li><a href="../direktvermarktung.php#freilandeier">Freilandeier</a></li>
                    </ul>
                </div>
            </li>
            <li class="">
                <div tabindex="0" class="onclick-menu">Aktuelles
                    <ul class="onclick-menu-content">
                        <li><a href="../aktuelles.php#info">News & Infos</a></li>
                        <li><a href="../aktuelles.php#verkauf">Verkaufszeiträume</a></li>
                        <li><a href="../aktuelles.php#faq">Fragen & Antworten</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="kontakt.php">Kontakt</a></li>
        </ul>
    </div>
</nav>
</div>

I got the snippet from CodePen where the links in the dropdown menu also won't work.

I have already tried inserting other links or changing the path. Nothing has helped so far.

You can test it on my website: https://www.qualitaetaufbestellung.de/index.php

.onclick-menu:focus .onclick-menu-content {
    opacity: 1;
    visibility: visible;
    display: inherit;
    pointer-events: auto;
}

The submenus relies on the parent elements be in focus to appear, by using this .onclick-menu:focus .onclick-menu-content. This has no issue if the intention is just for showing the submenus.

Unfortunately, this will cause problem if the submenu itself needs to be able to be clicked. When the submenu is clicked, the parent will lose "focus" and the submenu will be hidden again as soon as possible. So there is no click triggered in here on the link.

There is this :focus-within pseudo-class that can be used to prevent the parent losing focus when its descendant is clicked. So changing the :focus with :focus-within should solve your problem.