Votre question

enrouler un menu ! CSS sans javascript !

Tags :
  • Html
  • CSS
  • Javascript
  • Programmation
Dernière réponse : dans Programmation
15 Juin 2012 15:19:30

Bonjour,
je veu crée un menu déroulent, mais cela ne marche pas. j'ai mon Code HTML et CSS, mais les sous menus reste dessous les menus principales, et je ne comprend pas pourquoi.
serait t'il possible de corriger l'erreur s'il y en a une.
CODE HTML :

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>2menu</title>
  5. <link rel="stylesheet" type="text/css" href="2menu.css" />
  6. </head>
  7. <ul id="menu">
  8. <li>
  9. <a href="#1">Menu 1</a>
  10. <ul>
  11. <li><a href="#2">sous menu </a></li>
  12. <li><a href="#3">encore un sous menu !</a></li>
  13. <li><a href="#4">bah ! allez un autre !</a></li>
  14. </ul>
  15. </li>
  16. <li>
  17. <a href="#5">Menu 2</a>
  18. <ul>
  19. <li><a href="#6">sous menu </a></li>
  20. <li><a href="#7">et un autre</a></li>
  21. <li><a href="#8">encore un</a></li>
  22. <li><a href="#9">un autre</a></li>
  23. <li><a href="#10">le même</a></li>
  24. </ul>
  25. </li>
  26. <li>
  27. <a href="#21">Menu 3</a>
  28. <ul>
  29. <li><a href="#11">et bin v'la un autre sous menu</a></li>
  30. <li><a href="#12">et un autre</a></li>
  31. <li><a href="#13">puis un autre</a></li>
  32. <li><a href="#14">taratata</a></li>
  33. <li><a href="#15">fait beau hein !</a></li>
  34. <li><a href="#16">oui mais froid</a></li>
  35. <li><a href="#17">jamais content celui-là</a></li>
  36. <li><a href="#18">c'est sur</a></li>
  37. <li><a href="#19">en même temps</a></li>
  38. <li><a href="#20">c'est vrai</a></li>
  39. </ul>
  40. </li>
  41. <li>
  42. <a href="#22">Menu 4</a>
  43. <ul>
  44. <li><a href="#23">sous catégorie</a></li>
  45. <li><a href="#24">ça change de sous menu</a></li>
  46. <li><a href="#25">mettez-y ce qu'il vous plait</a></li>
  47. <li><a href="#26">allez encore un</a></li>
  48. <li><a href="#27">puis un autre</a></li>
  49. <li><a href="#28">et puis un autre</a></li>
  50. <li><a href="#29">c'est rudement joli hein !</a></li>
  51. <li><a href="#30">moi ça me plait bien</a></li>
  52. <li><a href="#31">pourrait etre mieux </a></li>
  53. <li><a href="#32">oui mais c'est plus cher !</a></li>
  54. </ul>
  55. </li>
  56. </ul>
  57. </html>


Code CSS :

  1. body {
  2. font: 11px verdana, sans-serif;
  3. background:url("http://www.cireasy.com/images/fondmenuderoulant.png") no-repeat scroll center top #FFFFFF;;
  4. margin: 0 ;
  5. padding: 0;
  6. }
  7. #menu
  8. {
  9. width:600px; /*je mets une largeur correspondant à mon image de fond pour le placer à gauche dans l'image */
  10. height: auto;
  11. list-style-type: none;
  12. margin: 0 auto; /*je mets un margin auto pour le centrer dans la page avec l'image*/
  13. padding: 0;
  14. border: 0;
  15. }
  16. #menu > li
  17. {
  18. width: 120px;
  19. margin: 5px;
  20. padding: 0;
  21. border: 0;
  22. }
  23. #menu li a{
  24. display: block;
  25. color: #FFFFFF;
  26. background-color: rgb(0, 0, 0);
  27. background-color: rgba(0, 0, 0, 0.5);
  28. margin: 0;
  29. padding: 4px 8px;
  30. border:1px solid #FFFFFF;
  31. text-decoration: none;
  32. }
  33. #menu li a:hover {
  34. background-color: rgb(175, 214, 1);
  35. background-color: rgba(175, 214, 1, 0.5);
  36. }
  37. /*---------------fin du menu de premier niveau-------------*/
  38. /*---------------début du menu déroulant-------------------*/
  39. #menu .menuderoulant {
  40. width:160px; /*une largeur supérieur au menu li pour se rendre sur le menuderoulant meme avec un espace*/
  41. display: none;
  42. list-style-type: none;
  43. margin: -23px 0 0 115px; /*une marge top inferieur pour remonter le menuderoulant et une marge left pour le decaler à droite du menu*/
  44. padding: 0;
  45. border: 0;
  46. position:absolute; /*pour eviter tout decalage*/
  47. }
  48. #menu .menuderoulant li
  49. {
  50. float: right;
  51. margin:0 auto;
  52. padding: 0;
  53. border: 0;
  54. width: 150px;
  55. border-top: 1px solid transparent;
  56. border-right: 1px solid transparent;
  57. }
  58. #menu .menuderoulant li a
  59. {
  60. display: block;
  61. color: #FFF;
  62. margin: 0;
  63. border: 0;
  64. text-decoration: none;
  65. background-color:rgb(0, 0, 0);
  66. background-color:rgba(0,0,0,0.5);
  67. }
  68. #menu .menuderoulant li a:hover
  69. {
  70. background-color: rgb(18, 89, 239);
  71. background-color: rgba(18, 89, 239, 0.8);
  72. }
  73. #menu .menuderoulant li a:visited {
  74. background-color:rgb(227, 22, 30);
  75. background-color:rgba(227, 22, 30, 0.5);
  76. }
  77. #menu li:hover > .menuderoulant {
  78. display: block;
  79. }


merci de me répondre.
Cordialement,
Jordy91

Autres pages sur : enrouler menu css javascript

16 Juin 2012 12:43:15

Bonjour,

Il y a quelques maladresses et 1 erreur dans ton code.

Tu devrais commencer par spécifier un doctype tout en haut de ta page, ce qui t'assurera une meilleure compatibilité sur les navigateurs (par exemple
  1. <!doctype html>
pour du html 5 et faire au plus simple)

Tu devrais choisir et définir l'encodage de caractères utilisé, juste avant ton <title>, par exemple:
  1. <meta charset="utf-8">
(apparemment tu serais en windows-1252)

Même si l'élément "body" est optionnel il serait plus judicieux de l'utiliser (<body></body>)


Dans ton css, tu fais référence à une classe .menuderoulant mais cette dernière n'apparaît pas comme attribut dans ton html... Tu dois les rajouter sur tes <ul>

  1. <ul class="menuderoulant">
m
0
l
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