Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1645 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Menu horizontal depliant en CSS : Bug sous IE7

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Menu horizontal depliant en CSS : Bug sous IE7

n°1832283
Yekhen
Posté le 29-12-2008 à 18:33:38  profilanswer
 

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 ;)

mood
Publicité
Posté le 29-12-2008 à 18:33:38  profilanswer
 

n°1832698
SeRiaL-
Posté le 30-12-2008 à 23:24:53  profilanswer
 

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

n°1837771
PIerrotW
Posté le 14-01-2009 à 12:40:45  profilanswer
 

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
n°1945703
bormat
Posté le 29-11-2009 à 18:40:44  profilanswer
 

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Menu horizontal depliant en CSS : Bug sous IE7

 

Sujets relatifs
Positionner un menuCoin arrondis en Css.
Problème alignement bloc CSS [terminé]Divers problèmes de CSS avec une barre de menu...
[résolu] Bug GROUP By sur MySql 3.23 ?Bug javascript sous chrome et pas ur les autres navigateurs
Adapter menu à la taille de la police du joueurGénérer un menu pdf via perl PDF::API2
[EDIT après avoir bossé un peu] Retour sur le menu principal 
Plus de sujets relatifs à : Menu horizontal depliant en CSS : Bug sous IE7

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.086 secondes

Copyright © 1997-2025 Groupe LDLC (Signaler un contenu illicite / Données personnelles)