28172 sujets

CSS et mise en forme, CSS3

Menu déroulant avec le display flex

Bonjour,

j'ai comme projet personnel de faire une page web en mettant mon cours dessus,

Je ne suis qu'au début, j'aimerai faire un menu déroulant en horizontal, comme mes compétences et connaissances en javascript sont limitées j'aimerai le faire en CSS, je vous mets en dessous ma partie html et css.

Le problème est que je n'y arrive pas, je ne sais pas comment faire réapparaître un sous menu quand la souris survol le titre.

Voici mon HTML : 
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Révisions IUT Informatique</title>
        <link rel="stylesheet" href="main.css">
    </head>
<body>
    <header>
        <h1>Menu</h1>
        <nav>
            <ul class="menu">
                <li class="Systeme"><a href="">Système</a></li>
                    <ul class="submenu">
                        <li><a href="">S11 début</a></li>
                        <li><a href="">S11 plus de difficultés</a></li>
                        <li><a href="">S11 expression régulières</a></li>
                    </ul>
                <li class="Maths"><a href="">Mathématiques</a></li>
                    <ul class="submenu">
                        <li><a href="">M11 Chapitre 1</a></li>
                        <li><a href="">M11 Chapitre 2</a></li>
                        <li><a href="">M12 Chapitre 1</a></li>
                    </ul>
                <li class="Eco"><a href="">Economie</a></li>
                    <ul class="submenu">
                        <li><a href="">E11 Chapitre 1</a></li>
                        <li><a href="">E11 Chapitre 2</a></li>
                        <li><a href="">E12 Chapitre 1</a></li>
                    </ul>
                <li><a href="">Programmation</a></li>
                <li><a href="">Base de données</a></li>
                <li><a href="">Communication</a></li>
                <li><a href="">Web</a></li>
            </ul>          
        </nav>
    </header>
    <main>
        <section>
            <h2>Présentation</h2>
            <p>
                Ce site est en construction, il me sert pour réviser tout en codant et en apprenant
                merci de votre compréhension.
            </p>
        </section>
    </main>
    <footer>
 
    </footer>
</body>
</html>

et voici mon css :
html{
    font-size: 18px;
    font-family: Roboto, sans-serif;
}
body{
    margin: 0;
    padding: 0;
}
/*Pour le menu*/
.menu{
    width: 100%;
    margin: 0;
}
header nav{
    background-color: #12A2E5;
}
header nav ul{
    list-style-type: none;
    padding: 0;
    display: flex;
}
header nav ul li{
    width: 100%;
    text-align: center;
}
header nav ul li a{
    text-decoration: none;
    //text-align: center;
    color: #FFF;
    display: block;
    padding: 1.5rem 0 1.5rem 0;
}
.submenu{
    display: none;
}
header nav ul li:hover{
    background-color: darkblue;
    display: block;
}
header nav ul li:hover .submenu{
    display: block;
}

merci pour vos réponses
Salut,
merci pour ta réponse
j'ai regardé le tuto que tu m'as envoyé,
j'ai réussi à faire un truc à peu près dans le style que j'aimerai mais il me manque quelques corrections,
je te mets en screen ce que j'aimerai corrigé,

upload/1545497423-73735-vision.png

Sur l'image on voit que quand je mets la souris sur le menu "système" le sous menu apparaît mais dépasse sur l'autre menu à droite
Comment le corriger ?

Et autre correction: Comment faire pour faire apparaître les sous menus plus bas ? parce qu'ils sont à mon goût trop haut

Je vous mets mon code CSS, enfin la partie qui concerne le menu

header nav ul{
    display: flex;
    justify-content: space-evenly;
}
header nav ul, header nav ul li ul{
    background-color: #12A2E5;
    list-style-type: none; /*Enlever les points devants les li*/
    margin: 0; 
    padding-left: 0;
}
header nav ul li, header nav ul li ul li{
    background-color:  #12A2E5;
    display: block;
    float: left; /*Elément floatant à gauche*/ 
    padding: 1rem;
    position: relative; /*?*/ 
    transition-duration: 0.5s; /*En combien de temps elles apparaissent*/
    width: 100%;
    text-align: center;
}
header nav ul li a, header nav ul li ul li a{
    color: #fff; /*Couleur des a en blanc*/
    text-decoration: none;
}
header nav ul li:hover, header nav ul li ul li:hover{
    background-color: darkblue;
    cursor: pointer; /*Changer le curseur*/
}
header nav ul li ul{
    background-color: #12A2E5;
    visibility: hidden; /*Caché les sous menus*/
    opacity: 0;
    position: absolute; /*Pour que les gds menus s'affichent normalement*/
    left: 0;
    display: none;
}
header nav ul li:hover > ul, 
header nav ul li:focus-within > ul,
header nav ul li ul:hover{
    visibility: visible;
    opacity: 1;
    display: block;
}
header nav ul li ul li{
    clear: both; /*Comportement d'un élément qui se situe à coté d'élément flottant*/
    width: 85%;
}

Merci de vos réponses
Modifié par gyoce (22 Dec 2018 - 18:42)
Hello

Je n'ai pas de compte jsfiddle mais j'ai pu enregistré mes modifs ici:
https://jsfiddle.net/6m0ju2t4/5/

Pense à élargir la fenêtre et utiliser les media queries pour gérer le responsive.

Je me suis permis de changer l'aspect du menu en essayant de respecter le design du départ et de virer les règles css inutiles. Il faut que tu utilises plus de class dans ton css pour cibler les éléments. Lorsque qu'un élément du DOM doit se comporter d'une façon particulière, il faut utiliser une classe. Il existe beaucoup plus de raisons encore pour utiliser des classes, mais ça peut s'apprendre après.

header nav ul et header nav ul li ul => c'est pas bien ça.
Les ul dans le nav n'ont pas le même comportement que les ul qui sont des les ul qui sont des une nav. Dans ton html, tu as bien mis les classes "menu" et "submenu" mais je ne les vois nul part dans le CSS, dommage...Il fallait les utiliser comme je l'ai fait.
Sujet clos
Aller à