menu déroulant largeurs variables sans JS

menu déroulant largeurs variables sans JS - HTML/CSS - Programmation

Marsh Posté le 27-04-2010 à 11:00:12    

Bonjour à tous !
 
Comme mon titre l'indique je souhaiterais réaliser un ménu déroulant qui fonctionne sans javascript, du moins sous Firefox.
Jusque-là ça va. Le souci c'est que le menu va être administrable, ce qui impose que les largeurs ne doivent pas être fixées.
 
Quand j'ai au moins 2 sous-menus dans 1 menu parent, ça passe. Mais quand je n'en ai qu'un seul, le "li" ne s'adapte pas à la largeur de son parent (alors qu'il a un width:100%).
 
Voilà le code en question :
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>test</title>
  6. <style type="text/css">
  7. html,body,a,ul,li{margin:0;padding:0}
  8. body{ font-family:Arial,Verdana,sans-serif; font-size:12px; line-height:1}
  10. /* ---------- MENU ----------- */
  11. .menu{
  12. float:left;
  13. width:100%;
  14. margin-bottom:26px;
  15. background:#B4ADB5;
  16. }
  17. .menu li{
  18. list-style:none;
  19. float:left;
  20. position:relative;
  21. text-align:center;
  22. }
  23. .menu a{
  24. color:#fff;
  25. padding:9px 18px 10px 18px;
  26. display:block;
  27. }
  29. /* ------ MENU SECOND NIVEAU-------- */
  30. .menu li ul{
  31. background:#fff;
  32. position:absolute;
  33. color:#906C69;
  34. display:none;
  35. border:2px solid #B4ADB5;
  36. border-top:none;
  37. z-index:200;
  38. }
  39. .menu li:hover{
  40. background:#fff;
  41. }
  42. .menu li:hover a{
  43. color:#906C69;
  44. border:2px solid #B4ADB5;
  45. border-bottom:none;
  46. padding:7px 16px 10px 16px;
  47. }
  48. .menu li a:hover{
  49. background:#EDE8E7;
  50. }
  51. .menu li:hover ul li a{
  52. color:#906C69;
  53. border:none;
  54. margin:0;
  55. background:#fff;
  56. }
  57. .menu li ul li a:hover{
  58. background:#EDE8E7;
  59. margin:0;
  60. }
  61. .menu li:hover ul{
  62. display:block;
  63. }
  64. .menu li ul li{
  65. width:100%;
  66. height:29px;
  67. }
  68. .menu li ul li a{
  69. color:#906C69;
  70. }
  71. </style>
  72. </head>
  73. <body>
  75. <ul class="menu">
  76. <li><a href="#">Qu'est-ce que le projet Bidule ?</a>
  77.  <ul>
  78.   <li><a href="#">Les enjeux</a></li>
  79.   <li><a href="#">Les objectifs</a></li>
  80.   <li><a href="#">Les intérêts</a></li>
  81.  </ul>
  82. </li>
  83. <li><a href="#">Les porteurs du projet</a>
  84.  <ul>
  85.   <li><a href="#">Nos partenaires</a></li>
  86.  </ul>
  87. </li>
  88. <li><a href="#">L'annuaire des acteurs du projet</a></li>
  89. </ul>
  91. </body>
  92. </html>


 
Si finalement, je dois utiliser du JS ça n'est pas trop grave... J'aimerais juste savoir si c'est possible sans.
 
Merci d'avance pour vos réponses.

Reply

Marsh Posté le 27-04-2010 à 11:00:12   

Reply

Marsh Posté le 27-04-2010 à 12:11:15    

Salut,

 

dans

 

.menu li ul{
background:#fff;
position:absolute;
color:#906C69;
display:none;
border:2px solid #B4ADB5;
border-top:none;
z-index:200;
}

 

rajoute : width:100%;

 

Par contre tu risque d'avoir un décalage puisqu'il y a des border


Message édité par aspirateur le 27-04-2010 à 12:11:47
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed