Problème menu blockmenu en CSS sous IE6. A l'aide

Bonjour à tous,

Après de multiples tests, mon site (http://www.zerobug.fr) fonctionne bien sous FF, IE7, mais le menu déconne sous IE6. C'est à cause des CSS blockmenu...mais on n'a pas réussi à débuguer ça. Quelqu'un s'y connaît en CSS ?

On a trouvé des sites qui y sont pourtant arrivé avec le même code (http://www.incredibleartist.com/)...mais j'ai beau chercher, je n'y arrive pas.

Merci.

Salut cher confrère

Ben tout simplement parce qu'IE6 n'implémente pas les hovers sur autre chose que les <a> donc pour que ça marche il faut travailler tes rollovers sur les liens...

/* menu */

#menu_principal {
	position: relative;
	width: 100%;
	height:39px;
	font-size: 12px;
	background: url(menu_bg.gif) no-repeat center;}

#menu_conteneur {
	position: relative;
	width: 780px;
	margin: 0 auto; 
		height:39px;
	color: #FFF;
}
	
#menu {	
font: bold 11px "Trebuchet MS", Arial, Helvetica, sans-serif;
height: 39px;
background: url(menu_bg.gif) no-repeat center;
}
	
#menu li{
float: left; 
width:111px; 
height:39px; 
list-style: none ;
line-height: 39px;
}	
	
#menu li a{
display: block;
width: 111px;
height: 39px;
margin: 0;
padding: 0;
color: white;
text-decoration: none;
}
	
/* menu principal */
#menu1 a{background:url(menu1_bg.gif) no-repeat 2px 33px}
#menu2 a{background:url(menu2_bg.gif) no-repeat 2px 33px}
#menu3 a{background:url(img/menu3_bg.gif) no-repeat 2px 33px}
#menu4 a{background:url(img/menu4_bg.gif) no-repeat 2px 33px}
#menu5 a{background:url(img/menu5_bg.gif) no-repeat 2px 33px}
#menu6 a{background:url(img/menu6_bg.gif) no-repeat 2px 33px}
#menu7 a{background:url(img/menu7_bg.gif) no-repeat 2px 33px}

#menu{text-align: center ;margin: 0 ;
	padding: 0 ;
}

#menu li a:hover {
	background-position:2px bottom;}
#menu li a.on {
	background-position:2px bottom}

<div id="menu_principal">
  <div id="menu_conteneur">
    <ul id="menu">
      <li id="menu1"><a href="index.php" class="on">Accueil</a></li>
      <li id="menu2" ><a href="Qualite-charte-depannage-informatique.php">Qualité</a></li>
      <li id="menu3" ><a href="tarifs-depannage-informatique-fronton.php">Tarifs</a></li>
      <li id="menu4" ><a href="formations-informatique-excel-word-outlook.php">Formations</a></li>
      <li id="menu5" ><a href="partenaires-assistance-informatique-montauban.php">Partenaires</a></li>
      <li id="menu6" ><a href="liens-test-connexion-adsl-eligibilite.php">Liens</a></li>

      <li id="menu7" ><a href="contact-depannage-informatique-castelginest.php">Contact</a></li>
    </ul>
  </div>
 </div>

J'ai fait un brin de ménage (pas à fond) mais si je puis me permettre, il ya un peu beaucoup de <div> dans le code... Il y avait surement moyen d'en économiser un grand nombre

<edit> ça peux se faire aussi avec un poil de JS </edit>
Modifié par ghost (25 Nov 2007 - 03:03)