Tout ce que j'ai réussi à faire pour l'instant, c'est de faire apparaitre mon icone hamburger à partir d'une certaine taille d'écran, tout en faisant disparaitre mon menu navigation.

Mais meme si j'utilise a peu pres la meme technique que pour le sous menu dont je vous ai parlé tout a l'heure, et bien cette fois ca ne fonctionne pas.

Voila donc mon probleme, si jamais quelqu'un a déjà eu ce probleme, ou qu'il connait une technique pour le résoudre, je suis preneur.
Je tiens a préciser au cas ou, que j'ai fais beaucoup de recherche, depuis ce matin car je suis bloqué dessus depuis hier, du coup, recherche google, et compagnie, j'ai meme trouvé des problemes quasi similaire sur ce meme forum, mais jamais rien de bien semblable, ou alors qui faisaient la meme chose que moi, (et eux ca marchait), ou alors avec soit du Java Script, soit du php...

Je vous remercie d'avance pour votre aide.
Bonne soirée a vous tous



Si vous voulez, je vous laisse une partie de mon code HTML et CSS pour voir a peu pres

<!-----NAVIGATION // MENU NAV----->
  <nav id="menu_nav">

<!-----HAMBURGER MOBILE----->
     <a href="#">
        <i class="fa fa-bars" aria-hidden="true"></i></a>

<!-----LISTE MENU NAV----->

       <ul id="liste_menu_nav" class="liste_mobile">

          <li><a href="#">WORK</a></li>
          <li><a href="#">COMPETENCE</a>
              <ul>
                 <li><a href="#">HTML</a></li>
                 <li><a href="#">CSS</a></li>
                 <li><a href="#">JAVA SCRIPT</a></li>
                 <li><a href="#">PHP</a></li>
              </ul></li>
           <li><a href="#">ABOUT</a></li>
           <li><a href="#">CONTACT</a></li>

        </ul>

</nav>

@media all and (max-width: 800px) {
    #menu_nav .liste_mobile {
        display: none;
    }

    #menu_nav i {
        display: block;
        width: 100%;
        padding-top: 10px;
        padding-bottom: 10px;
        text-align: center;
        font-size: 1.5em;
    }

    #menu_nav i:target .liste_mobile {
        display: block;
    }
}

-
Edité par SekSap 6 décembre 2017 à 15:08:09

#menu_nav i:target .liste_mobile {

Ça voudrait dire que .liste_mobile est l'enfant de <i> ALORS que non.

Bon déjà ne fait pas le target sur i mais sur a ça revient au même et c'est plus simple pour la suite.

<a class="iconMenu" href="#">
    <i class="fa fa-bars" aria-hidden="true"></i>
</a>

#menu_nav iconMenu:target .liste_mobile {
    display: block;
}

Maintenant il te manque un sélecteur CSS. tu en as deux pour ceux cas ci : + et ~.

le +, comme ceci :

a + ul  {
    ...
} 

veux dire "À partir de a, appliquer ce css uniquement sur le premier élément ul qui le suit."

le ~(ALTgr + 2 suivi d'un espace), comme ceci :

a ~ ul {
    ...
} 

est bien moins restrictive que le +. Il permet de ciblé tout les ul qui suivent a.
Pour toi c'est le + qu'il te faut.

En espérant t'avoir débloqué.

-
Edité par GuillaumeBo1 5 décembre 2017 à 1:53:45

Merci d'avoir pris le temps de me répondre. 

<nav id="menu_nav">

                <input type="checkbox" name="test" id="menu_mobile" checked/>

                <!-----HAMBURGER MOBILE----->
                <a href="#" id="aTest">
                    
                    <label for="menu_mobile" id="labelTest"><i class="fa fa-bars" aria-hidden="true" id="hamburgerMenu"></i></label>
                </a>

                <!-----LISTE MENU NAV----->

                <ul id="listeMobile">
                    <li><a href="#header_img">HOME</a></li>
                    <li><a href="#section1">WORK</a></li>
                    <li><a href="#">COMPETENCE</a>
                        <ul>
                            <li><a href="#">HTML</a></li>
                            <li><a href="#">CSS</a></li>
                            <li><a href="#">JAVASCRIPT</a></li>
                            <li><a href="#">PHP</a></li>
                        </ul>
                    </li>
                    <li><a href="#">ABOUT</a></li>
                    <li><a href="#">CONTACT</a></li>

                </ul>

            </nav>

@media all and (max-width: 800px) {

    /*----------------------
    MENU NAV HAMBURGER
-----------------------*/
    #menu_nav i {
        display: block;
        width: 100%;
        padding-top: 10px;
        padding-bottom: 10px;
        text-align: center;
        font-size: 1.5em;
        position: fixed;
        background: #C9C3B3;
        opacity: 0.5;
        position: fixed;
        top: 0;
    }


    #menu_nav ul {
        flex-direction: column;
        text-align: center;
        background-color: rgba(247, 247, 247, 0.6);
    }


    #menu_nav ul li:hover ul {
        display: block;
        background-color: rgba(247, 247, 247, 0.6);
        text-align: center;

    }

    #menu_mobile:checked ~ #listeMobile {
        display: none;
    }

Bonjour,

pour mettre ton topic en résolu il ne faut pas changer le titre mais utiliser le bouton en haut à droite

-
Edité par Lamecarlate 6 décembre 2017 à 16:33:56