Problème responsive navbar

Bonjour à tous !
Je suis débutant en intégration et je rencontre un petit problème de responsive sur ma barre de navigation...
Lorsqu'on est en dessous des 940px ma navbar se transforme en menu hamburger, jusque là tout va bien ! Or lorsqu'on clique sur ce menu hamburger... et ben rien ne se passe... le menu ne se déplie pas... J'ai beau chercher l'erreur je ne la trouve pas...
Pouvez vous m'aider s'il vous plaît ?
Un grand merci à tous ceux qui auront pris le temps de lire mon message et à ceux qui m'aideront !
Très bonne soirée à vous !

LA PARTIE HTML :

    <div class="container">
        <div class="navbar">
            <img src="img/logo.png" alt="logo" class="logo">
            <label for="btn" class="icone">
                <img src="img/menu.png" alt="menu hamburger" class="hamburger">
            </label>
            <input type="checkbox" id="btn">
            <nav>
                <ul>
                    <li><a href="accueil.html">Accueil</a></li>
                    <li>
                        <label for="btn-1" class="afficher">Catégorie 1</label>
                        <a href=".html">Catégorie 1</a>
                        <input type="checkbox" id="btn-1">
                        <ul>
                            <li><a href="test.html">Sous catégorie 1</a></li>
                            <li><a href="test.html">Sous catégorie 2</a></li>
                            <li><a href="test.html">Sous catégorie 3</a></li>
                        </ul>
                    </li>
                    <li>
                        <label for="btn-2" class="afficher">Catégorie 2</label>
                        <a href="test.html">Catégorie 2</a>
                        <input type="checkbox" id="btn-2">
                        <ul>
                            <li><a href="test.html">Sous catégorie 1</a></li>
                            <li><a href="test.html">Sous catégorie 2</a></li>
                            <li><a href="test.html">Sous catégorie 3</a></li>
                            <li><a href="test.html">Sous catégorie 4</a></li>
                        </ul>
                    </li>
                    <li><a href="test.html">Catégorie 3</a></li>
                    <li><a href="test.html">Catégorie 4</a></li>
                    <li><img src="img/cart.png" alt="panier" class="cart"></li>
                </ul>
                </nav>
        </div>
     </div>

CSS DE LA NAVBAR POUR RESPONSIVE

 @media screen and (max-width:940px) {
    .container{
        height: 50vh;
        width: 100%;
        background-image: url(background.jpg);
        background-position: center;
        background-size: cover;
        position: relative;
    }
    nav ul{
        margin-right: 0px;
        float: left;
    }
    nav .logo{
        padding-left: 30px;
        width: 160px;
    }
    nav ul li, nav ul ul li{
        display: block;
        width: 100%;
    }
    nav ul ul{
        top:70px;
        position: static;
        float:none;
        display: none;
        visibility: visible;
    }
    nav ul ul a{
        padding-left: 40px;
    }
    .afficher{
        display: block;
        color: white;
        font-size: 18px;
        padding: 0 20px;
        line-height: 70px;
        cursor: pointer;
    }
    .icone{
        display:block;
        position: absolute;
        right: 40px;
        line-height: 70px;
        font-size: 25px;
        cursor: pointer;
    }
    .hamburger{
        width: 25px;
    }
    .afficher + a, ul{
        display:none;
    }
    [id^=btn]:checked +ul{
        display: block;
    }
}

CSS DE LA NAVBAR DE BASE

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}
.container{
    height: 100vh;
    width: 100%;
    background-image: url(background.jpg);
    background-position: center;
    background-size: cover;
    position: relative;
}
.navbar{
    width: 100%;
    height: 10vh;
    margin: auto;
    display: flex;
    align-items: center;
    background: rgba(0,0,0,.8)
}
.logo{
    width:160px;
    cursor:pointer;
    margin-left: 50px;
}
.cart{
    width:30px;
    cursor:pointer;
    margin-top: 18px;
}
.logo{
    width:160px;
    cursor:pointer;
}
nav ul{
    float: right;
    list-style: none;
    margin-right: 40px;
    margin-left: 50px;
    position: relative;
}
nav ul li{
    float: left;
    display: inline-block;
    margin: 0 5px;
}
nav ul li a{
    color: white;
    text-decoration:none;
    line-height:70px;
    font-size: 18px;
    padding: 8px 15px;
}
nav ul ul{
    position: absolute;
    top: 70px;
    visibility:hidden;
}
nav ul li:hover > ul{
    visibility: visible;
}
nav ul ul li{
    position:relative;
    margin:0;
    width: 160px;
    float:none;
    display: list-item;
    background: rgba(0,0,0,.8);
}
nav ul li a:hover{
    color: orange;
    border-radius: 5px;
    box-shadow : 0 0 5px orange;
}
nav ul ul li a:hover{
    color: orange;
    box-shadow : none;
}
.afficher,.icone, input{
    display:none;
}

Bonsoir. L'erreur est ici :

[id^=btn]:checked + nav > ul { /* J'ai rajouté nav */
      display: block;
}

Remarquez aussi qu'avec le code qui précède :

.afficher + a, ul{
  display:none;
}

Vous allez cacher toutes les listes, et non seulement celle de la navigation. Il faut donc là aussi limiter le scope, par exemple :

.afficher + a, .navbar nav > ul {
  display:none;
}

En tout cas, utiliser des checkbox pour ouvrir et fermer tous les onglets... c'est ouf comme solution. Je l'ai souvent fait à l'époque, mais juste pour l'hamburger, pas pour les onglets un par un. Quitte à utiliser du HTML, autant utiliser details/summary.

Je fais tout ça au pif hein, possible qu'il y ait des erreurs car je me suis contenté de lire le code. Un exemple en ligne c'est toujours mieux.
Modifié par Olivier C (14 Jan 2023 - 22:14)