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}
  9. /* ---------- MENU ----------- */
  10. .menu{
  11. float:left;
  12. width:100%;
  13. margin-bottom:26px;
  14. background:#B4ADB5;
  15. }
  16. .menu li{
  17. list-style:none;
  18. float:left;
  19. position:relative;
  20. text-align:center;
  21. }
  22. .menu a{
  23. color:#fff;
  24. padding:9px 18px 10px 18px;
  25. display:block;
  26. }
  27. /* ------ MENU SECOND NIVEAU-------- */
  28. .menu li ul{
  29. background:#fff;
  30. position:absolute;
  31. color:#906C69;
  32. display:none;
  33. border:2px solid #B4ADB5;
  34. border-top:none;
  35. z-index:200;
  36. }
  37. .menu li:hover{
  38. background:#fff;
  39. }
  40. .menu li:hover a{
  41. color:#906C69;
  42. border:2px solid #B4ADB5;
  43. border-bottom:none;
  44. padding:7px 16px 10px 16px;
  45. }
  46. .menu li a:hover{
  47. background:#EDE8E7;
  48. }
  49. .menu li:hover ul li a{
  50. color:#906C69;
  51. border:none;
  52. margin:0;
  53. background:#fff;
  54. }
  55. .menu li ul li a:hover{
  56. background:#EDE8E7;
  57. margin:0;
  58. }
  59. .menu li:hover ul{
  60. display:block;
  61. }
  62. .menu li ul li{
  63. width:100%;
  64. height:29px;
  65. }
  66. .menu li ul li a{
  67. color:#906C69;
  68. }
  69. </style>
  70. </head>
  71. <body>
  72. <ul class="menu">
  73. <li><a href="#">Qu'est-ce que le projet Bidule ?</a>
  74.  <ul>
  75.   <li><a href="#">Les enjeux</a></li>
  76.   <li><a href="#">Les objectifs</a></li>
  77.   <li><a href="#">Les intérêts</a></li>
  78.  </ul>
  79. </li>
  80. <li><a href="#">Les porteurs du projet</a>
  81.  <ul>
  82.   <li><a href="#">Nos partenaires</a></li>
  83.  </ul>
  84. </li>
  85. <li><a href="#">L'annuaire des acteurs du projet</a></li>
  86. </ul>
  87. </body>
  88. </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