28172 sujets

CSS et mise en forme, CSS3

[Résolu] Le menu niveau 4 de ma page web s affiche quand je sousligne

Bonjour

J'ai créé une page web avec des niveaux de menu menu niveau 1 a niveau 4 mais le menu niveau 4 s affiche quand je passe la souris sous le menu niveau 2 avant que je passe la souris sous le menu niveau 3 .
Je voudrais que le menu niveau 4 s affiche que quand je passe ma souris sous le niveau 3 pas avant
Je crois que le probleme est dans le cSS mais je ne vois pas ou avec les hoover etc...
Pouvez vous m aider
ci dessous mon code css et html
=======================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML >
<TITLE>Boite à outil </TITLE>
<title></title>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">

<style>



* { margin:0.7; padding:0; text-decoration:none; }

.content { width:2000px; margin:auto; }

#monmenu { margin-top:15px; height:42px; padding:0px;}

#monmenu ul { list-style-type:none; }
#monmenu ul li { float:left; }
#monmenu ul li a { display:block; width:150px; color:black; line-height:60px; background-color: white; text-align:center; font-size:14px;padding:0px;}

#monmenu ul li a:hover { background-color:orange;}


#monmenu ul ul { display:none; position:absolute; }
#monmenu ul ul ul { display:none; position:absolute; }
#monmenu ul ul ul ul { display:none; position:absolute; }
#monmenu ul ul ul ul ul { display:none; position:absolute; }
#monmenu ul ul.niveau2 { top:60px; left:0px;padding:0px; }
#monmenu ul ul.niveau2bis { top:60px; left:0px;padding:0px; }
#monmenu ul ul.niveau2 li { float:none;}
#monmenu ul ul.niveau2bis li { float:none;}

#monmenu ul ul.niveau3 li { float:left; }
#monmenu ul ul.niveau3bis li { float:left; }
#monmenu ul ul.niveau3 li { float:left; }
#monmenu ul ul.niveau3bis li { float:left; }
#monmenu ul ul.niveau4bis li { float:left; }

#monmenu ul ul.niveau3 { top:0px; left:150px; }
#monmenu ul ul.niveau3bis { top:0px; left:150px; }
#monmenu ul ul.niveau4bis { top:0px; left:150px; }
#monmenu ul li ul li a { display:block; width:150; color:blue; line-height:42px; background-color:blue ; text-align:center; margin:1px;;padding:0px;text-align: left;}
#monmenu ul li ul li ul li a { display:block; left:300px;width:150px; color:black; line-height:42px; background-color:red ; text-align:left;margin:1px;padding:0px;}
#monmenu ul li ul li ul li ul li a{ display:block; left:450;width:150px; color:#57ABFF; line-height:42px; background-color:grey; text-align:left;margin:1px;padding:0px;}
#monmenu ul li ul li ul li ul li ul li a { display:block;left:600; width:150px; color:#57ABFF; line-height:42px; background-color:yellow; text-align:center;margin:1px;padding:0px;}
#monmenu ul li ul li ul li ul li ul li ul li a { display:block; left: 750;width:150px; color:#57ABFF; line-height:42px; background-color:grey; text-align:center;margin:1px;padding:0px;}
#monmenu li { position:relative; }
#monmenu li:hover ul.niveau2, #monmenu li li:hover ul.niveau3 { display:block;}#monmenu li li li:hover ul.niveau3 { display:block;}
#monmenu li:hover ul.niveau2bis , #monmenu li li:hover ul.niveau3bis { display:block;}#monmenu li li li:hover ul.niveau3bis { display:block;}#monmenu li li:hover ul.niveau4bis { display:block;}#monmenu li li li li:hover ul.niveau4bis { display:block;}
h1{color:orange;font-size:25px;}
h2{color:blue;font-style:normal;font-size:15px;font-family:Luminari;text-align:left;}
h3{color:blue;font-style:normal;font-size:15px;font-family:Luminari;text-align:left;}
jc{bg-color:#b4b4b4 }
.ed{top:0px;;font-family:Luminari, fantasy;font-size:24px;font-style:Luminari, fantasy;font-weight:900;font-variant:normal;color:#EFD807;text-align:left;text-bottom:center;background-color:#b4b4b4 }
.bo{font-family:Luminari, fantasy;font-size:15px;font-style:Luminari, fantasy;font-weight:900;font-variant:normal;color:#A98C78;text-align:left;text-bottom:center;background-color:#b4b4b4 }
</style>
</head>
<body>
<!--<div style="position:absolute;left:10px;height:210px;width:1200px;margin-left:auto;margin-right:auto;text-align:left;color:white;background-color:#57ABFF;font-size:25px;font-family:Arial;font-style:normal">
<div style="position:absolute;left:280px;height:210px;width:1200px;margin-left:auto;margin-right:auto;text-align:left;color:white;background-color:#57ABFF;font-size:25px;font-family:Arial;font-style:normal"><b><br><br>BOSOS(Boite à Outil Service Operation SDx )</b><br><br>
</div>-->

<div style="position:absolute;left:0px;height:150px;width:764px;margin-left:auto;margin-right:auto;text-align:left;color:white;background-color:#FF7900;font-size:20px;font-family:Arial;font-style:normal"></div>
<div style="position:absolute;left:0px;height150px;width:764px;margin-left:auto;margin-right:auto;text-align:center ;color:white;background-color:#FF7900;font-size:20px;font-family:Arial;font-style:normal"><b><br><br>Boite à Outil <br><br> </div>

<!--<img src="gollum.gif" style="position:absolute;height:90px; width:150px; top:60px ;left:500px"></div>-->
<!--<div style="position:absolute;top:210px;height:40px;color:orange;background-color:white;font-size:25px;font-family:Arial;font-style:normal;">
<marquee ><h1><b>Actualités à la une :</b>Nouveau doc de formation uCPE ... </h1></marquee></div>-->

<div style="position:absolute;top:136px;left:0px;"id="monmenu" class="content">
<ul class="niveau1">

<b>


</li>
<li><a style="background-color:purple;font-size:18px" >niveau 1?</a>
<ul class="niveau2bis" style="background-color:grey;color:black">
<li ><a style ="color:blue;font-size:20px">niveau 2 ? </a>
<ul class="niveau3bis" style="background-color:#50BE87;color:black">
<li><a style="font-size:18px" >niveau 3 </a>
<ul class="niveau4bis" style="background-color:#50BE87;color:black">

<li><a style="font-size:18px" href="#" target="_blank"style ="color:black;font-size:18px">niveau 4 </a></li>
</ul></li>
<li><a style="font-size:18px" href="#" target="_blank"style ="color:black;font-size:18px">niveau 3 </a>
</li>
</ul></li>
<li ><a style ="color:black;font-size:20px">niveau 2 ? </a>
<ul class="niveau3" style="background-color:#50BE87;color:black">
<li><a style="font-size:18px" href="#" target="_blank"style ="color:black;font-size:18px">niveau 3 </a>
<li><a style="font-size:18px" href="#" target="_blank"style ="color:black;font-size:18px">niveau 3 </a>


<li><a style=" font-size:18px"href="#" target="_blank">niveau 3</a></li>
</ul></li>
<li ><a style ="color:black;font-size:20px">niveau 2 ? </a>
<ul class="niveau3" style="background-color:#50BE87;color:black">
<li><a style="font-size:18px" href="#" target="_blank"style ="color:black;font-size:18px">niveau 3 </a>

</ul></li>

<!--<ul class="niveau3">



-->
</li>


</ul>
</li>










</b>


</ul> </li>
</div>
</body>
</html>
Bonjour, le problème vient de cette règle :

#monmenu li li:hover ul.niveau4bis {
    display: block;
}

Quand on enchaîne les sélecteurs par de simples espaces, ça vise tous les éléments enfants, directs ou indirects. Donc dès que l’on survole un li de deuxième niveau d’imbrication, tout ul.niveau4bis enfant de cet élément s’affiche directement. Utilise le chevron (>) si tu veux sélectionner un enfant direct.
Mais essaie plutôt avec cette règle :

#monmenu .niveau3bis:hover .niveau4bis {
    display: block;
}

Après, je pense que tu es conscient que tu peux beaucoup simplifier ton code Smiley cligne
bonjour

merci de ta réponse .
quand je passe sur le menu niveau 2 il affiche bien que le menu niveau 3 puis du menuniveau 3 lil affiche bien le menu niveau 4 .
mais si je reviens en arriere il reste figé sur le menu niveau 4
en piece jointe ma copie d écran .
je te redonne mon code avec ta modification éffectué .
=================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML >
<TITLE>Boite à outil </TITLE>
<title></title>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">

<style>



* { margin:0.7; padding:0; text-decoration:none; }

.content { width:2000px; margin:auto; }

#monmenu { margin-top:15px; height:42px; padding:0px;}

#monmenu ul { list-style-type:none; }
#monmenu ul li { float:left; }
#monmenu ul li a { display:block; width:150px; color:black; line-height:60px; background-color: white; text-align:center; font-size:14px;padding:0px;}

#monmenu ul li a:hover { background-color:orange;}


#monmenu ul ul { display:none; position:absolute; }
#monmenu ul ul ul { display:none; position:absolute; }
#monmenu ul ul ul ul { display:none; position:absolute; }
#monmenu ul ul ul ul ul { display:none; position:absolute; }
#monmenu ul ul.niveau2 { top:60px; left:0px;padding:0px; }
#monmenu ul ul.niveau2bis { top:60px; left:0px;padding:0px; }
#monmenu ul ul.niveau2 li { float:none;}
#monmenu ul ul.niveau2bis li { float:none;}

#monmenu ul ul.niveau3 li { float:left; }
#monmenu ul ul.niveau3bis li { float:left; }
#monmenu ul ul.niveau3 li { float:left; }
#monmenu ul ul.niveau3bis li { float:left; }
#monmenu ul ul.niveau4bis li { float:left; }

#monmenu ul ul.niveau3 { top:0px; left:150px; }
#monmenu ul ul.niveau3bis { top:0px; left:150px; }
#monmenu ul ul.niveau4bis { top:0px; left:150px; }
#monmenu ul li ul li a { display:block; width:150; color:blue; line-height:42px; background-color:blue ; text-align:center; margin:1px;;padding:0px;text-align: left;}
#monmenu ul li ul li ul li a { display:block; left:300px;width:150px; color:black; line-height:42px; background-color:red ; text-align:left;margin:1px;padding:0px;}
#monmenu ul li ul li ul li ul li a{ display:block; left:450;width:150px; color:#57ABFF; line-height:42px; background-color:grey; text-align:left;margin:1px;padding:0px;}
#monmenu ul li ul li ul li ul li ul li a { display:block;left:600; width:150px; color:#57ABFF; line-height:42px; background-color:yellow; text-align:center;margin:1px;padding:0px;}
#monmenu ul li ul li ul li ul li ul li ul li a { display:block; left: 750;width:150px; color:#57ABFF; line-height:42px; background-color:grey; text-align:center;margin:1px;padding:0px;}
#monmenu li { position:relative; }
#monmenu li:hover ul.niveau2, #monmenu li li:hover ul.niveau3 { display:block;}#monmenu li li li:hover ul.niveau3 { display:block;}
#monmenu li:hover ul.niveau2bis , #monmenu li li:hover ul.niveau3bis { display:block;}#monmenu li li li:hover ul.niveau3bis { display:block;}#monmenu .niveau3bis:hover .niveau4bis { display:block;}
h1{color:orange;font-size:25px;}
h2{color:blue;font-style:normal;font-size:15px;font-family:Luminari;text-align:left;}
h3{color:blue;font-style:normal;font-size:15px;font-family:Luminari;text-align:left;}
jc{bg-color:#b4b4b4 }
.ed{top:0px;;font-family:Luminari, fantasy;font-size:24px;font-style:Luminari, fantasy;font-weight:900;font-variant:normal;color:#EFD807;text-align:left;text-bottom:center;background-color:#b4b4b4 }
.bo{font-family:Luminari, fantasy;font-size:15px;font-style:Luminari, fantasy;font-weight:900;font-variant:normal;color:#A98C78;text-align:left;text-bottom:center;background-color:#b4b4b4 }
</style>
</head>
<body>
<!--<div style="position:absolute;left:10px;height:210px;width:1200px;margin-left:auto;margin-right:auto;text-align:left;color:white;background-color:#57ABFF;font-size:25px;font-family:Arial;font-style:normal">
<div style="position:absolute;left:280px;height:210px;width:1200px;margin-left:auto;margin-right:auto;text-align:left;color:white;background-color:#57ABFF;font-size:25px;font-family:Arial;font-style:normal"><b><br><br>BOSOS(Boite à Outil Service Operation SDx )</b><br><br>
</div>-->

<div style="position:absolute;left:0px;height:150px;width:764px;margin-left:auto;margin-right:auto;text-align:left;color:white;background-color:#FF7900;font-size:20px;font-family:Arial;font-style:normal"></div>
<div style="position:absolute;left:0px;height150px;width:764px;margin-left:auto;margin-right:auto;text-align:center ;color:white;background-color:#FF7900;font-size:20px;font-family:Arial;font-style:normal"><b><br><br>Boite à Outil <br><br> </div>

<!--<img src="gollum.gif" style="position:absolute;height:90px; width:150px; top:60px ;left:500px"></div>-->
<!--<div style="position:absolute;top:210px;height:40px;color:orange;background-color:white;font-size:25px;font-family:Arial;font-style:normal;">
<marquee ><h1><b>Actualités à la une :</b>Nouveau doc de formation uCPE ... </h1></marquee></div>-->

<div style="position:absolute;top:136px;left:0px;"id="monmenu" class="content">
<ul class="niveau1">

<b>


</li>
<li><a style="background-color:purple;font-size:18px" >niveau 1?</a>
<ul class="niveau2bis" style="background-color:grey;color:black">
<li ><a style ="color:blue;font-size:20px">niveau 2 ? </a>
<ul class="niveau3bis" style="background-color:#50BE87;color:black">
<li><a style="font-size:18px" >niveau 3 </a>
<ul class="niveau4bis" style="background-color:#50BE87;color:black">

<li><a style="font-size:18px" href="#" target="_blank"style ="color:black;font-size:18px">niveau 4 </a></li>
</ul></li>
<li><a style="font-size:18px" href="#" target="_blank"style ="color:black;font-size:18px">niveau 3 </a>
</li>
</ul></li>
<li ><a style ="color:black;font-size:20px">niveau 2 ? </a>
<ul class="niveau3" style="background-color:#50BE87;color:black">
<li><a style="font-size:18px" href="#" target="_blank"style ="color:black;font-size:18px">niveau 3 </a>
<li><a style="font-size:18px" href="#" target="_blank"style ="color:black;font-size:18px">niveau 3 </a>


<li><a style=" font-size:18px"href="#" target="_blank">niveau 3</a></li>
</ul></li>
<li ><a style ="color:black;font-size:20px">niveau 2 ? </a>
<ul class="niveau3" style="background-color:#50BE87;color:black">
<li><a style="font-size:18px" href="#" target="_blank"style ="color:black;font-size:18px">niveau 3 </a>

</ul></li>

<!--<ul class="niveau3">



-->
</li>


</ul>
</li>










</b>


</ul> </li>
</div>
</body>
</html>
Pardon, je viens de comprendre ce que tu voulais dire. Tu devrais remplacer toutes tes règles display: block par :

#monmenu li:hover>ul {
    display: block;
}

Après l’avoir un peu dégrossi, voici le C.S.S. que je te propose :

*{text-decoration:none;margin:.7px;padding:0;}
.content{width:2000px;margin:auto;}
#monmenu{margin-top:15px;height:42px;padding:0;}
#monmenu ul{list-style-type:none;}
#monmenu a{display:block;width:150px;color:#000;line-height:60px;background-color:#FFF;text-align:center;font-size:14px;padding:0;}
#monmenu a:hover{background-color:orange;}
#monmenu .niveau2bis a{color:blue;line-height:42px;background-color:blue;text-align:left;margin:1px;}
#monmenu .niveau3bis a{left:300px;color:#000;background-color:red;}
#monmenu .niveau4bis a{left:450px;color:#57ABFF;background-color:grey;}
#monmenu li{position:relative;float:left;}
h1{color:orange;font-size:25px;}
#monmenu ul ul{display:none;position:absolute;}
#monmenu .niveau2bis{top:60px;left:0;padding:0;}
#monmenu ul ul.niveau2bis li{float:none;}
#monmenu .niveau3bis,#monmenu .niveau4bis{top:0;left:150px;}
#monmenu li:hover>ul{display:block;}
h2,h3{color:blue;font-style:normal;font-size:15px;font-family:Luminari;text-align:left;}

(En remplaçant partout la classe .niveau3 par .niveau3bis)
Meilleure solution
bonjour Anedja
merci beaucoup CA marche .
J ai testé en rajoutant des niveaux 4 dans dans d autres menu niveau 3 ca fonctionne nickel.
tu es tres forte en CSS , j aimerai etre aussi compétent .
j ai plein de livre chez moi .Ou as tu appris le html css
je suis administrateur réseau ,le html est un hobby pour moi .
je te remercie énormément , j ai énormément cherché la solution .Et toi en un jour c était plié .
============================
voici mon code final avec tes améliorations

=================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML >
<TITLE>Boite à outil </TITLE>
<title></title>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">

<style>
*{text-decoration:none;margin:.7px;padding:0;}
.content{width:2000px;margin:auto;}
#monmenu{margin-top:15px;height:42px;padding:0;}
#monmenu ul{list-style-type:none;}
#monmenu a{display:block;width:150px;color:#000;line-height:60px;background-color:#FFF;text-align:center;font-size:14px;padding:0;}
#monmenu a:hover{background-color:orange;}
#monmenu .niveau2bis a{color:blue;line-height:42px;background-color:blue;text-align:left;margin:1px;}
#monmenu .niveau3bis a{left:300px;color:#000;background-color:red;}
#monmenu .niveau4bis a{left:450px;color:#57ABFF;background-color:grey;}
#monmenu li{position:relative;float:left;}
h1{color:orange;font-size:25px;}
#monmenu ul ul{display:none;position:absolute;}
#monmenu .niveau2bis{top:60px;left:0;padding:0;}
#monmenu ul ul.niveau2bis li{float:none;}
#monmenu .niveau3bis,#monmenu .niveau4bis{top:0;left:150px;}
#monmenu li:hover>ul{display:block;}
h2,h3{color:blue;font-style:normal;font-size:15px;font-family:Luminari;text-align:left;}
</style>
</head>
<body>
<!--<div style="position:absolute;left:10px;height:210px;width:1200px;margin-left:auto;margin-right:auto;text-align:left;color:white;background-color:#57ABFF;font-size:25px;font-family:Arial;font-style:normal">
<div style="position:absolute;left:280px;height:210px;width:1200px;margin-left:auto;margin-right:auto;text-align:left;color:white;background-color:#57ABFF;font-size:25px;font-family:Arial;font-style:normal"><b><br><br>BOSOS(Boite à Outil Service Operation SDx )</b><br><br>
</div>-->

<div style="position:absolute;left:0px;height:150px;width:764px;margin-left:auto;margin-right:auto;text-align:left;color:white;background-color:#FF7900;font-size:20px;font-family:Arial;font-style:normal"></div>
<div style="position:absolute;left:0px;height150px;width:764px;margin-left:auto;margin-right:auto;text-align:center ;color:white;background-color:#FF7900;font-size:20px;font-family:Arial;font-style:normal"><b><br><br>Boite à Outil <br><br> </div>

<!--<img src="gollum.gif" style="position:absolute;height:90px; width:150px; top:60px ;left:500px"></div>-->
<!--<div style="position:absolute;top:210px;height:40px;color:orange;background-color:white;font-size:25px;font-family:Arial;font-style:normal;">
<marquee ><h1><b>Actualités à la une :</b>Nouveau doc de formation uCPE ... </h1></marquee></div>-->

<div style="position:absolute;top:136px;left:0px;"id="monmenu" class="content">
<ul class="niveau1">

<b>
<li><a style="background-color:purple;font-size:18px" >niveau 1?</a>
<ul class="niveau2bis" style="background-color:grey;color:black">
<li ><a style ="color:blue;font-size:20px">niveau 2 ? </a>
<ul class="niveau3bis" style="background-color:#50BE87;color:black">
<li><a style="font-size:18px" >niveau 3 </a>
<ul class="niveau4bis" style="background-color:#50BE87;color:black">
<li><a style="font-size:18px" href="#" target="_blank"style ="color:black;font-size:18px">niveau 4 </a></li>
<li><a style="font-size:18px" href="#" target="_blank"style ="color:black;font-size:18px">niveau 4 </a></li>
<li><a style="font-size:18px" href="#" target="_blank"style ="color:black;font-size:18px">niveau 4 </a></li>
</ul>
</li>
<li><a style="font-size:18px" href="#" target="_blank"style ="color:black;font-size:18px">niveau 3 </a>
<ul class="niveau4bis" style="background-color:#50BE87;color:black">
<li><a style="font-size:18px" href="#" target="_blank"style ="color:black;font-size:18px">niveau 4 </a></li>
<li><a style="font-size:18px" href="#" target="_blank"style ="color:black;font-size:18px">niveau 4 </a></li>
<li><a style="font-size:18px" href="#" target="_blank"style ="color:black;font-size:18px">niveau 4 </a></li>
<li><a style="font-size:18px" href="#" target="_blank"style ="color:black;font-size:18px">niveau 4 </a></li>
</ul>

</li>
</ul>
</li>
<li ><a style ="color:black;font-size:20px">niveau 2 ? </a>
<ul class="niveau3bis" style="background-color:#50BE87;color:black">
<li><a style="font-size:18px" href="#" target="_blank"style ="color:black;font-size:18px">niveau 3 </a></li>
<li><a style="font-size:18px" href="#" target="_blank"style ="color:black;font-size:18px">niveau 3 </a></li>
<li><a style=" font-size:18px"href="#" target="_blank">niveau 3</a></li>
</ul>
</li>
<li ><a style ="color:black;font-size:20px">niveau 2 ? </a>
<ul class="niveau3bis" style="background-color:#50BE87;color:black">
<li><a style="font-size:18px" href="#" target="_blank"style ="color:black;font-size:18px">niveau 3 </a></li>
<li><a style="font-size:18px" href="#" target="_blank"style ="color:black;font-size:18px">niveau 3 </a></li>
<li><a style="font-size:18px" href="#" target="_blank"style ="color:black;font-size:18px">niveau 3 </a></li>
<li><a style="font-size:18px" href="#" target="_blank"style ="color:black;font-size:18px">niveau 3 </a></li>
<li><a style="font-size:18px" href="#" target="_blank"style ="color:black;font-size:18px">niveau 3 </a></li>

</ul>
</li>
</ul>
</li>


</ul>
</b>



</div>
</body>
</html>
J’ai appris, et je continue d’apprendre, notamment sur Alsacréations (tu connais ?), le M.D.N. (Mozilla Developer Network) qui est une bonne référence, et grâce à notre ami Google.

Quelques remarques sur ton code, néanmoins :
— Évite les attributs style dans les balises H.T.M.L., il vaut mieux mettre une classe et cibler les balises correspondantes depuis un élément <style> ou une feuille de style. Je vois même des balises avec deux fois cet attribut, ce qui est contre-productif puisque seul le premier est pris en compte dans le navigateur.
— On évite aussi les sélecteurs C.S.S. d’identifiant (#monmenu), parce qu’ils l’emportent sur les autres sélecteurs, ce qui les rend difficiles à contourner ; en pratique, il est avantageux de ne sélectionner que par des sélecteurs de classe, et par des noms d’éléments nus pour les règles très générales. C’est plus facile à gérer.
— Si tu ne le fais pas déjà, quand tu crées une page web, utilise l’inspecteur du navigateur (contrôle-maj-i) pour voir immédiatement comment le H.T.M.L. est interprété, et quelles règles de style affectent ou non chaque élément (et éviter de les multiplier inutilement).
— Préfère la structure suivante :
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titre</title>
</head>
<body>
    
</body>
</html>


Bon courage !
Sujet clos
Aller à