Résolu Pouvez-vous m'aider à réaliser un menu déroulant de mon site ?

Solutions (12)
Tags :
  • souris
  • Html
  • CSS
  • Programmation
|
Bonjour,

Je bloque sur le menu de mon site. J'ai réalisé un menu déroulant horizontal qui fonctionne parfaitement. Cependant j'aimerais créer un menu à 3 niveau...
Le premier niveau est horizontal et lorsque l'on positionne la souris sur le lien le niveau 2 se déroule verticalement sous le niveau 1 (jusque là tout va bien cela fonctionne). Ce que j'aimerais faire est d'insérer un niveau 3 qui serait visible lorsque l'on positionne la souris sur le lien de niveau 2 et qui se déroulerait a droite de ce dernier. Le problème que je rencontre est que je n'arrive pas à faire réapparaître mon menu de niveau 3...

voici le code html suivi du css que j'ai tenter de faire...

  1. <div id="menu_general">
  2. <ul id="menu">
  3. <li><h3><a href="page_1.html">Page 1</a></h3></li><!-- Niveau 1-->
  4. <li><h3><a href="page_2.html">Page 2</a></h3><!-- Niveau 1-->
  5. <ul class="sous_menu">
  6. <li><h4><a href="page_2.html#ancre_1">Ancre 1</a></h4><!-- Niveau 2-->
  7. <ul class="sous_sous_menu">
  8. <li><h4><a href="page_2.html#ancre_A">Ancre A</a></h4></li><!-- Niveau 3-->
  9. <li><h4><a href="page_2.html#ancre_B">Ancre B</a></h4></li><!-- Niveau 3-->
  10. <li><h4><a href="page_2.html#ancre_C">Ancre C</a></h4></li><!-- Niveau 3-->
  11. </ul>
  12. </li>
  13. <li><h4><a href="page_2.html#ancre_2">Ancre 2</a></h4><!-- Niveau 2-->
  14. <ul class="sous_sous_menu">
  15. </ul>
  16. </li>
  17. <li><h4><a href="page_2.html#ancre_3">Ancre 3</a></h4><!-- Niveau 2-->
  18. <ul class="sous_sous_menu">
  19. <li><h4><a href="page_2.html#ancre_D">Ancre D</a></h4></li><!-- Niveau 3-->
  20. <li><h4><a href="page_2.html#ancre_E">Ancre E</a></h4></li><!-- Niveau 3-->
  21. </ul>
  22. </li>
  23. <li><h4><a href="page_2.html#ancre_4">Ancre 4</a></h4><!-- Niveau 2-->
  24. <ul class="sous_sous_menu">
  25. <li><h4><a href="page_2.html#ancre_F">Ancre F</a></h4></li><!-- Niveau 3-->
  26. </ul>
  27. </li>
  28. <li><h4><a href="page_2.html#ancre_5">Ancre 5</a></h4><!-- Niveau 2-->
  29. <ul class="sous_sous_menu">
  30. </ul>
  31. </li>
  32. <li><h4><a href="page_2.html#ancre_6">Ancre 6</a></h4><!-- Niveau 2-->
  33. <ul class="sous_sous_menu">
  34. </ul>
  35. </li>
  36. <li><h4><a href="page_2.html#ancre_7">Ancre 7</a></h4><!-- Niveau 2-->
  37. <ul class="sous_sous_menu">
  38. </ul>
  39. </li>
  40. </ul>
  41. </li>
  42. <li><h3><a href="page_3.html">Page 3</a></h3><!-- Niveau 1-->
  43. <ul class="sous_menu">
  44. <li><h4><a href="page_3.html#ancre_8">Ancre 8</a></h4></li><!-- Niveau 2-->
  45. <li><h4><a href="page_3.html#ancre_9">Ancre 9</a></h4></li><!-- Niveau 2-->
  46. <li><h4><a href="page_3.html#ancre_10">Ancre 10</a></h4></li><!-- Niveau 2-->
  47. </ul>
  48. </li>
  49.  
  50. </ul>
  51. </div>


Et voici le css

  1. #menu
  2. {
  3. width: 1057px;
  4. list-style-type: none;
  5. margin-left: 100px;
  6. margin-top: 120px;
  7. padding: 0px;
  8. border: 0px;
  9. position: absolute;
  10. top: 0;
  11. left: 0;
  12. }
  13. #menu li
  14. {
  15. float: left;
  16. width: 146px;
  17. margin: 0px;
  18. padding: 0px;
  19. border: 0px;
  20. }
  21. #menu .sous_menu
  22. {
  23. display: none;
  24. list-style-type: none;
  25. margin: 0px;
  26. padding: 0px;
  27. border: 0px;
  28. text-align: center;
  29. }
  30. #menu .sous_menu li
  31. {
  32. float: none;
  33. margin: 0px;
  34. padding: 0px;
  35. border: 0px;
  36. width: 149px;
  37. border-top: 0px;
  38. border-right: 0px;
  39. }
  40. #menu li a:link, #menu li a:visited
  41. {
  42. display: block;
  43. height: 1%;
  44. color: #ffffff;
  45. background:#000000;
  46. margin: 0px;
  47. padding:4px 8px;
  48. border:0px inset #ffffff;
  49. text-decoration: none;
  50. }
  51. #menu li a:hover
  52. {
  53. background-color: #ffffff;
  54. }
  55. #menu li a:active
  56. {
  57. background-color: #000000;
  58. }
  59. #menu .sous_menu li a:link, #menu .sous_menu li a:visited
  60. {
  61. display: block;
  62. color: #000000;
  63. margin: 0px;
  64. border: 0px;
  65. text-decoration: none;
  66. background-color: #ffffff;
  67. top: 1px;
  68. }
  69. #menu .sous_menu li a:hover
  70. {
  71. background-image: none;
  72. background-color: #c3c3c3;
  73. }
  74. #menu li:hover > .sous_menu
  75. {
  76. display: block;
  77. }
  78. #menu .sous_menu h4, #menu h3
  79. {
  80. margin: 0px;
  81. margin-top: 1px;
  82. }
  83. .sous_sous_menu
  84. {
  85. position: absolute;
  86. margin: 0px;
  87. padding: 0px;
  88. left: 149px;
  89. display: none;
  90. }
  91. .sous_sous_menu li
  92. {
  93. Position: relative;
  94. list-style: none;
  95. border-top: 1px solid;
  96. }
  97. #menu ul.sous_menu li: hover ul.sous_sous_menu
  98. {
  99. Display: block
  100. }


Je rajoute un genre de schéma de ce que je souhaiterais obtenir, ce sera peut être plus claire...



Voilà, un grand merci si vous arrivez à m'aider...
  • Meuniers a édité ce message
Contenus similaires
Meilleure solution
partage
, Modérateur |
Miyen a dit :
Salut,

Merci en fait le probème venait aussi et surtout, je pense, que dans : "#menu ul.sous_menu li:hover ul.sous_sous_menu" j'avais un espace entre ":" et "hover" et donc tout de suite ça marche moins bien...

Maintenant c'est bon mon menu apparaît, sauf qu'il y a un décalage comme tu me me disais il faut que je joue avec top dans mon .sous_sous_menu mais rien n'y fait (j'ai essayé en mettant 1000px quand même...).

:pt1cable:  Je ne vois vraiment pas ce qui ne vas pas, et pourquoi cela ne bouge pas... :pt1cable: 

Ah oui désolé, j'avais corrigé ça chez moi, mais je l'ai pas noté.

Mais si tu n'as pas mis le position:relative comme je t'ai dit, ça n'ira pas non plus, vu qu'il faut que ton absolute se positionne par rapport à ton li en relative.
Et après, avec un top:0; sur tes sous_sous_menu, ça sera bon.
  • Commenter cette solution |
Score
0
òh
òi
, Modérateur |
Tu peux très bien mélanger des métriques aussi, ça ne pose pas de problème.
  • Commenter cette réponse |
Score
0
òh
òi
|
ok je pensais qu'étant donné que toutes mes autres données métrique étaient en px il fallait que je le spécifie quand même. Mais c'est noté ça m'évitera des soucis dorénavant...

Merci
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Quand tu spécifies 0, tu n'as pas besoin de spécifier px (ou une autre unité de mesure). Vu que 0px = 0em = 0cm ...
  • Commenter cette réponse |
Score
0
òh
òi
|
Merci beaucoup c'est bon en fait j'ai un soucis avec les espace, et j'en avais encore mis un entre mon "0" et "px"...

Va falloir que je fasse plus attention à ça... :) 
  • Commenter cette réponse |
Score
0
òh
òi
|
Meilleure réponse sélectionnée par Miyen.
  • Commenter cette réponse |
Score
0
òh
òi
|
Salut,

Merci en fait le probème venait aussi et surtout, je pense, que dans : "#menu ul.sous_menu li:hover ul.sous_sous_menu" j'avais un espace entre ":" et "hover" et donc tout de suite ça marche moins bien...

Maintenant c'est bon mon menu apparaît, sauf qu'il y a un décalage comme tu me me disais il faut que je joue avec top dans mon .sous_sous_menu mais rien n'y fait (j'ai essayé en mettant 1000px quand même...).

:pt1cable:  Je ne vois vraiment pas ce qui ne vas pas, et pourquoi cela ne bouge pas... :pt1cable: 
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Dans ton code CSS tu as :
  1. #menu .sous_menu li
  2. {
  3. float: none;
  4. margin: 0px;
  5. padding: 0px;
  6. border: 0px;
  7. width: 149px;
  8. border-top: 0px;
  9. border-right: 0px;
  10. }


Tu ajoutes position:relative; dedans et c'est bon...

Il faudra aussi que tu joues avec top dans ton:
  1. .sous_sous_menu
  2. {
  3. position: absolute;
  4. margin: 0px;
  5. padding: 0px;
  6. left: 149px;
  7. display: none;
  8. }


pour que le sous-sous menu soit bien positionné.
  • Commenter cette réponse |
Score
0
òh
òi
|
Vraiment désolé mais je l'ai tenté en #menu sous_menu li, et aussi en rajoutant une ligne .sous_menu li, mais il n'y a rien a faire mon menu n'apparait pas...

:??: 
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
C'est pas le li sous_sous_menu que tu dois mettre en position relative, c'est le li de ton sous_menu
  • Commenter cette réponse |
Score
0
òh
òi
|
Mais sur en ligne 91 j'ai déjà mis .sous_sous_menu li { position: relative; etc.} et j'ai testé en li.sous_sous_menu ça ne marche pas non plus...
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Salut,

T'as presque déjà tout fait, il te manque juste à mettre tes li en position:relative, pour que le position:absolute de tes sous_sous_menu passent en relatif par rapport à ton précédent li, et c'est tout bon je pense.
  • Commenter cette réponse |

Ce n'est pas ce que vous cherchiez ?

Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS