Menu horizontal depliant en CSS : Bug sous IE7

Menu horizontal depliant en CSS : Bug sous IE7 - HTML/CSS - Programmation

Marsh Posté le 29-12-2008 à 18:33:38    

Bonjour,
 
je viens vous demander de l'aide car j'ai un soucis avec un menu horizontal en CSS sur plusieurs niveaux (dépliant au passage de la souris). Celui-ci fonctionne très bien sous IE6 et FF, en revanche, il ne se déplie pas sous IE7 et je ne trouve pas d'où pourrait venir le problème !
 
Voici le menu :
 

Code :
  1. <div class="menu_hor">
  3. <ul>
  4. <li style="width:200px"><a href="#">LIEN 1<!--[if IE 7]><!--></a><!--<![endif]-->
  5. <!--[if lte IE 6]><table><tr><td><![endif]-->
  6. <ul style="width:755px">
  7.  <li style="width:150px"><a class="sub" href="#" title="">LIEN 1.1<!--[if IE 7]><!--></a><!--<![endif]-->
  8.   <!--[if lte IE 6]><table><tr><td><![endif]-->
  9.   <ul class="left_side" style="width:302px">
  10.    <li style="width:150px"><a href="#" title="Le concept">Le concept</a></li>
  11.    <li style="width:150px"><a href="moyens.php" title="Mise en oeuvre">Mise en oeuvre</a></li>
  12.   </ul>
  13.   <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  14.  </li>
  15.  <li style="width:150px"><a class="sub" href="#" title="">LIEN 1.2<!--[if IE 7]><!--></a><!--<![endif]-->
  16.   <!--[if lte IE 6]><table><tr><td><![endif]-->
  17.   <ul class="right_side" style="width:906px">
  18.    <li style="width:150px"><a href="approche_globale.php" title="Approche globale">Approche globale</a></li>
  19.    <li style="width:150px"><a href="notice_verte_generale.php" title="Notice verte générale">Notice verte générale</a></li>
  20.    <li style="width:100px"><a href="diagrammes.php" title="Diagrammes">Diagrammes</a></li>
  21.    <li style="width:150px"><a href="init.php" title="Notices vertes détaillées">Notices vertes détaillées</a></li>
  22.    <li style="width:200px"><a href="b_ecologique.php" title="Barème des actions écologiques">Barème des actions écologiques</a></li>
  23.    <li style="width:150px"><a href="axe_ecoclassement.php" title="Eco-classement">Eco-classement</a></li>
  24.   </ul>
  25.   <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  26.  </li>
  27.  <li style="width:150px"><a class="sub" href="#" title="">LIEN 1.3<!--[if IE 7]><!--></a><!--<![endif]-->
  28.   <!--[if lte IE 6]><table><tr><td><![endif]-->
  29.   <ul class="right_side" style="width:303px;left:302px;">
  30.    <li style="width:100px"><a href="notice_verte_co2.php" title="CO2">CO2</a></li>
  31.    <li style="width:100px"><a href="notice_verte_producteur.php" title="Algues vertes">Algues vertes</a></li>
  32.    <li style="width:100px"><a href="#" title="Carburant vert">Carburant vert</a></li>
  33.   </ul>
  34.   <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  35.  </li>
  36.  <li style="width:150px"><a class="sub" href="#" title="">LIEN 1.4<!--[if IE 7]><!--></a><!--<![endif]-->
  37.   <!--[if lte IE 6]><table><tr><td><![endif]-->
  38.   <ul class="left_side" style="left:453px; width:150px">
  39.    <li style="width:100px"><a href="#" title="Carburant vert">Carburant vert</a></li>
  40.   </ul>
  41.   <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  42.  </li>
  43.  <li style="width:150px"><a class="sub" href="#" title="">LIEN 1.5<!--[if IE 7]><!--></a><!--<![endif]-->
  44.   <!--[if lte IE 6]><table><tr><td><![endif]-->
  45.   <ul class="left_side" style="width:404px;left:351px;">
  46.    <li style="width:100px"><a href="#" title="Missions vertes">Missions vertes</a></li>
  47.    <li style="width:100px"><a href="#" title="Biomissions">Biomissions</a></li>
  48.    <li style="width:100px"><a href="#" title="Ecomissions">Ecomissions</a></li>
  49.    <li style="width:100px"><a href="#" title="Calendrier">Calendrier</a></li>
  50.   </ul>
  51.   <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  52.  </li>
  53. </ul>
  54. <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  55. </li>
  56. <li style="width:200px"><a href="ecologique.php">LIEN 2<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
  57. <li style="width:200px"><a href="structure.php">LIEN 3<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
  58. <li style="width:200px"><a href="#">LIEN 4<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
  59. <li style="width:200px"><a href="versionning.php">LIEN 5<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
  61. </ul>
  63. </div>


 
Et la partie CSS correspondante est la suivante :
 

Code :
  1. .menu_hor {font-family: arial, sans-serif;  height:30px; position:relative; margin:0; font-size:11px; margin:20px 0 10px 0; background:transparent; position:relative; z-index:100;}
  2. .menu_hor ul {padding:0; margin:0; list-style-type: none;}
  4. .menu_hor ul li {float:left; border-left:1px solid #87C720;}
  6. .menu_hor ul li a, .menu_hor ul li a:visited {display:block; text-decoration:none; padding:0 0 0 5px; height:30px; line-height:30px; color:#000; background:#FDFF42 url(images/drop.gif) bottom right no-repeat;}
  8. .menu_hor table {border-collapse:collapse; margin:0; padding:0; font-size:1em;}
  10. .menu_hor ul li ul {visibility:hidden; position:absolute; top:30px; left:0; }
  13. .menu_hor ul li:hover a,
  14. .menu_hor ul li a:hover {color:#fff; background:#525E04;}
  16. .menu_hor ul li:hover ul,
  17. .menu_hor ul li a:hover ul {visibility:visible; width:1030px;background:transparent; color:#fff;}
  19. .menu_hor ul li:hover ul.right_side li,
  20. .menu_hor ul li a:hover ul.right_side li {float:right; border:0; border-left:1px solid #eee;}
  22. .menu_hor ul li:hover ul.left_side li,
  23. .menu_hor ul li a:hover ul.left_side li {float:left; border:0; border-left:1px solid #eee;}
  25. .menu_hor ul li:hover ul li a.sub,
  26. .menu_hor ul li a:hover ul li a.sub {background:#525E04 url(images/drop2.gif) bottom right no-repeat; color:#fff;}
  28. .menu_hor ul li:hover ul li ul,
  29. .menu_hor ul li a:hover ul li a ul {visibility:hidden; position:absolute; left:0; top:30px; }
  31. .menu_hor ul li:hover ul li a,
  32. .menu_hor ul li a:hover ul li a {display:block; background:#005491; color:#fff;}
  34. .menu_hor ul li:hover ul li a:hover,
  35. .menu_hor ul li a:hover ul li a:hover {background:#7E8F08; color:#000;}
  37. .menu_hor ul li:hover ul li:hover ul,
  38. .menu_hor ul li a:hover ul li a:hover ul {visibility:visible; color:#000; background:#7E8F08;}
  40. .menu_hor ul li:hover ul.right li {float:right;}
  42. .menu_hor ul li:hover ul li:hover ul li a,
  43. .menu_hor ul li a:hover ul li a:hover ul li a {background:#7E8F08; color:#000;}
  45. .menu_hor ul li:hover ul li:hover ul li a:hover,
  46. .menu_hor ul li a:hover ul li a:hover ul li a:hover {background:#383F04; color:#fff;}


 
Je m'arrache les cheveux et ne trouve pas la solution. J'espère pouvoir trouver une solution à mon problème avec votre aide car je commence à desesperer  :(  
 
En vous remerciant par avance de votre aide, je vous souhaite une agréable journée/soirée suivant l'heure à laquelle vous lirez ce message ;)

Reply

Marsh Posté le 29-12-2008 à 18:33:38   

Reply

Marsh Posté le 30-12-2008 à 23:24:53    

Hello
 
J'ai rarement vu un code aussi immonde..
Mais déjà, ce serait plus facile si tu postais un lien
 
Si t'es intéressé par un menu de qualité (code propre, accessibilité, quelques fonctionnalités intéressantes), utilise le menu Superfish (jQuery nécessaire)  
http://users.tpg.com.au/j_birch/pl [...] /#examples

Reply

Marsh Posté le 14-01-2009 à 12:40:45    

Salut, tu peux également récupérer mon menu déroulant (HTML + CSS).
C'est un mix de plusieurs menus trouvés sur le web.
 
Fichier HTML = Voir le code source de : http://pierre.warnez.perso.neuf.fr
Le CSS = http://pierre.warnez.perso.neuf.fr/Style.css.
 
Si tu as des questions, utilise le formulaire de contact : http://pierre.warnez.perso.neuf.fr/Contact.htm
 
Bonne journée


Message édité par PIerrotW le 14-01-2009 à 12:41:13
Reply

Marsh Posté le 29-11-2009 à 18:40:44    

Reply

Sujets relatifs:

Leave a Replay

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