Bonsoir,

Je rencontre un problème au niveau de mon code CSS pour créer des sous-menus. Selon ce que j'ai tenté -en vain- de faire, le fait de passer sa souris sur une des grandes catégories devrait faire apparaître les parties du sous-menu en colonne, mais non.

Il doit surement y avoir une erreur toute bête ou de gros oublis, mais j'aimerai vraiment trouver une solution.

Merci de votre aide !

<nav>
            <ul id="conteneur">
                <li class="accueil"><a href="Parcour'Alpes.html"> <b> Accueil </b> </a> </li>
                <li class="qui"> Qui sommes-nous ? </li>
                   <ul class="submenu">
                        <li><a href="#"> Découverte des Alpes </a> </li>
                        <li><a href="#"> Notre histoire </a> </li>
                    </ul> 
                <li class="parcours"> Les parcours </li>
                   <ul class="submenu">
                        <li><a href="#"> Randonnée </a> </li>
                        <li><a href="#"> VTT </a> </li>
                    </ul> 
                <li class="infos"> Infos pratiques </li>
                    <ul class="submenu">
                        <li><a href="#"> Expériences </a> </li>
                        <li><a href="#"> Nous contacter </a> </li>
                    </ul> 
            </ul>
</nav>

a {
color: black;
text-decoration: none;    
}

#conteneur {
	text-align: center; 
	display: flex;
	font-size: 25px;
	justify-content: space-around; /* on aligne sur l'axe principal */
	list-style: none;
	margin: 0px;
	padding: 0px;
}

.accueil .qui .parcours .infos{
	border: 1px solid transparent;
}

.accueil{
	background-color: rgb(102, 179, 255);
	width: 25%;
	padding: 20px;
}	

.qui{
	background-color: rgb(0, 128, 255);
	width: 25%;
	padding: 20px;
}	

.parcours{
	background-color: rgb(102, 179, 255);
	width: 25%;
	padding: 20px;
}	

.infos{
	width: 25%;
	background-color: rgb(0, 128, 255);
	padding: 20px;
}

.submenu {
    display: none;
    flex-flow: column wrap;
    position: absolute;
    background: red;
}

.qui:hover > .submenu {
	display: flex;
}  

.parcours:hover > .submenu {
	display: flex;
}  

.infos:hover > .submenu {
	display: flex;
}  

-
Edité par MatteoClavel1 5 janvier 2019 à 12:41:26

Bonjour, 

Je peux te conseiller d'utiliser des div pour faire ton menu, tu créé ta balise nav, tu mets ensuite une div qui définira unsous-menu, tu lui donne comme nom de class drop par exemple ensuite tu utilise un bouton pour détecter le survol de la souris, puis une autre div qui contiendra le sous menu comme ceci : 

<nav>
        <a href="">Accueil</a>
        <div class="drop">
            <button class="btn">Dropdown</button>
            <div class="submenu">
                <a href="#">Lien 1</a>
                <a href="#">Lien 2</a>
                <a href="#">Lien 3</a>
            </div>
        </div> 
    </nav>

Ensuite on a juste a appliquer quelques propriétés CSS et ton menu est opérationnel : 

nav{
            overflow: hidden;
            background-color: blue;
        }

        nav a {
          float: left;
          color: white;
          text-align: center;
          padding: 14px 16px;
          text-decoration: none;
        }

        nav a:hover, .drop:hover .btn {
            background-color: red;
        }

        .drop{
            overflow: hidden;
            float: left;
        }


        .drop .btn {
            font-size: 16px; 
            border: none;
            outline: none;
            color: white;
            padding: 14px 16px;
            background-color: inherit;
        }
      

        .submenu {

            background-color: green;
            min-width: 160px;
            z-index: 1;
            display: none;
            position: absolute;
        }


        .submenu a {
            float: none;
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            text-align: left;
        }

        .drop:hover .submenu {
            display: block;
        }

Petit aperçu au survol de la souris:

La propriété overflow:hidden; signifie que si un élément dépasse du bloc nav il sera caché.

Voila, j'espère t'avoir aider ! Si tu as une question n'hésite pas

Bonne journée !

Tout d'abord, merci pour ton aide ! 

Le problème, c'est qu'en tant que grand débutant, j'ai un peu de mal à comprendre  Il faudrait créer une nouvelle div comme celle du "drop" dans ton exemple pour chaque sous-menu qu'on veut créer ?

Oui je me doute, j'ai moi même galérer pour les sous menu au début.

Désolé, je n'ai pas expliquer dans les détails mais oui en effet, si tu veux d'autre sous menu tu dois recréé une div comme celle du drop (en gardant les mêmes noms de classe).

Si tu le souhaite je peux t'expliquer en détails en vocal se sera plus compréhensible