Problème pour apparition de sous-menu

Bonjour à tous,

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 !

<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>

#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;
}

Bonjour,

Tes sous-menus ne sont pas contenus dans les li qui les précèdent (dans le html), alors que dans le css, tu supposes qu'ils le sont.

C'est pour ça que rien ne se déclenche.

Soit tu déplaces les </li> dans ton html après les </ul> de tes sous-menus, soit tu modifies tes css en remplaçant les > par des +.

Ceci étant, déclencher l'apparition d'un sous-menu via un hover, en 2019, est selon moi douteux, vu que la moitié des utilisateurs sont sur mobile, et qu'il n'y a pas de hover pour eux.

Amicalement,
Modifié par parsimonhi (05 Jan 2019 - 17:30)