Menu déroulant CSS

Le menu ne s'affiche pas

25 mars 2020 à 8:44:52

Bonjour, je suis novice ....( très novice) actuellement je suis en train de faire des exercices pour créer un menu déroulant, hélas c'est la troisième vidéo de tutoriel que je regarder sur Youtube et je refais la meme manipulation tout est pareil ... sauf pour le déroulement le <ul> une fois que le display: none est actif ..le hover ne réagit pas ... je suis sur que je me trompe quelque part mais je n'arrive pas à saisir mon erreur dites moi si je dois fournir le fichier HTML et CSS dans le forum ?

Merci pour votre aide en avance

Lamecarlate

25 mars 2020 à 8:47:55

Bonjour,

je te suggère d'essayer ce tuto-là : http://www.frogweb.fr/menu-deroulant-horizontal/ . Oui, encore un, mais celui est vraiment correct, il ne joue pas avec display: none, notamment (ça pose des problèmes d'accessibilité).

Et si tu n'y arrives pas avec celui-là, poste ton HTML et ton CSS ici, coloré avec le bouton </> de la barre d'outils du forum.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

TimDonov

25 mars 2020 à 9:56:46

<!DOCTYPE html>

<head>

<title>menu deroulant</title>

</head>

<body>

<ul>

<li class="active"><a href="#">Qui sommes nous ?</a></li>

<li><a href="#">Programmes</a>

<ul>

<li><a href="#">Equipe 1</a></li>

<li><a href="#">Equipe 2</a></li>

<li><a href="#">Equipe 3</a></li>

</ul>

</div>

</li>

<li><a href="#">Cycles</a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>

</body>

</html>

et le code css

margin: 0px;

padding: 0px;

}

body{

background-image: url(fond_ecran.jpg);

background-size: cover;

background-position: center;

background-attachment: fixed;

box-sizing: border-box;

font-family: sans-serif;

}

.menu_bar{

background: blue;

text-align: center;

}

.menu_bar ul{

display: inline-flex;

list-style: none;

color: white;

}

.menu_bar ul li{

width: 180px;

margin: 15px;

padding: 15px;

}

.menu_bar ul li a {

text-decoration: none;

color: white;

}

.active,.menu_bar ul li :hover {

background-color: turquoise;

padding: 10px;

border-radius: 3px;

}

.sub_menu1{

display: none;

}

.menu_bar ul li :hover .sub_menu1{

display: block;

}

Lamecarlate

25 mars 2020 à 10:03:33

Alors : déjà, j'ai précisé d'utiliser le bouton </> de la barre d'outils du forum, c'est pour une bonne raison. Les couleurs du texte sont trop pâles, c'est difficilement lisible.

Ensuite : tu as essayé le tuto de Frogweb ?

(Enfin : * { margin: 0 } c'est à bannir d'urgence, c'est sortir le bazooka pour tuer une mouche, franchement)

Pas d'aide concernant le code par MP, le forum est là pour ça :)

TimDonov

25 mars 2020 à 10:13:14

pardon je n'avais pas bien compris je vous refais je vous prie de m'excusez pour cette erreur

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>menu deroulant</title>
    <link rel="stylesheet" href="test_style.css">
</head>
<body>
    <div class="menu_bar">
       <ul>
          <li class="active"><a href="#">Qui sommes nous ?</a></li>
          <li><a href="#">Programmes</a>            
             <div class="sub_menu1">
               <ul>
                <li><a href="#">Equipe 1</a></li>
                <li><a href="#">Equipe 2</a></li>
                <li><a href="#">Equipe 3</a></li>
               </ul>

             </div>
           </li>
          <li><a href="#">Cycles</a></li>
          <li><a href="#">Contact</a></li>
      </ul>
   </div>
    
</body>
</html>

*{
    margin: 0px;
    padding: 0px;
}
body{
    background-image: url(fond_ecran.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    box-sizing: border-box;
    font-family: sans-serif;
}
.menu_bar{
    background: blue;
    text-align: center;
}
.menu_bar ul{
    display: inline-flex;
    list-style: none;
    color: white;
}
.menu_bar ul li{
    width: 180px;
    margin: 15px;
    padding: 15px;

}
.menu_bar ul li a {
    text-decoration: none;
    color: white;
}
.active,.menu_bar ul li :hover {
    background-color: turquoise;
    padding: 10px;
    border-radius: 3px;
}
.sub_menu1{
   
    display: none;
}
.menu_bar ul li :hover  .sub_menu1{
   
 display: block;
}