Probleme compatibilité Multi Menu CSS ie6 / 7

bonjour,

je souhaiterais creer un menu un peu specifique en feuille de style compatible ie6, ie7 et firefox
un menu fixe avec une feuille de style classique pour une enumeration et les sous elements ne sont affiches que lorsque on passe avec la souris.
mais j ai quelques surprises avec ie, pour commencer sous ie6 il m est impossible de le faire fonctionner correctement et sous ie7 j ai une bordure blanche alors que sous mozilla il fonctionne correctement.

<div id="vertm">
  <h3>Les M&eacute;tiers</h3>
  <ul id="vertnav">
    <li> <a href="#">menu 1</a>
        <ul>
          <li><a href="#">menu 1.1</a></li>
          <li><a href="#">menu 1.2*</a>
              <ul>
                <li><a href="#">menu 1.2.1</a>
                    <ul>
                      <li><a href="#">menu 1.2.1.1</a></li>
                      <li><a href="#">menu 1.2.1.2</a></li>
                    </ul>
                </li>
                <li><a href="#">menu 1.2.2</a></li>
                <li><a href="#">menu 1.2.3</a></li>
                <li><a href="#">menu 1.2.4*</a>
                    <ul>
                      <li><a href="#">menu 1.2.4.1</a></li>
                      <li><a href="#">menu 1.2.4.2</a></li>
                    </ul>
                </li>
                <li><a href="#">menu 1.2.5</a></li>
              </ul>
          </li>
          <li><a href="#">menu 1.3</a></li>
          <li><a href="#">menu 1.4</a></li>
        </ul>
    </li>
	
    <li> <a href="#">menu 2</a>
        <ul>
          <li><a href="#">menu 2.1</a></li>
          <li><a href="#">menu 2.2</a></li>
          <li><a href="#">menu 2.3</a></li>
          <li><a href="#">menu 2.4*</a>
              <ul>
                <li><a href="#">menu 2.4.1</a></li>
              </ul>
          </li>
        </ul>
    </li>	
  </ul>
  <h3>Organisation</h3>
   <ul id="vertnav">
    <li> <a href="#">Annuaire</a> </li>
    <li> <a href="#">Organigramme</a> </li>
  </ul>	
</div>
  

feuille de style

#vertnav{
	list-style: none;		
	margin:0;
	padding:0;
	border:0;
}

#vertnav ul { 
	padding:0;
	margin:0;
	list-style: none;
	z-index:99;
	overflow:visible;
	position:absolute; 
	background-color:#ccc;      
}

#vertnav li { 
	position: relative;
	background-color:#ccc;
	display:block;	
}
#vertnav ul li{
	background-color:#8c8c8c;
}

#vertnav li{ 
	width:190px;	
	display: block;	
}

#vertnav li a {
	padding: 3px 0 3px 18px;
	background-image: url("../images/fleche_blanche.jpg");
	background-repeat: no-repeat;
	background-position: left center;
}

#vertnav li a:hover{ 
	color:red;
	background-image: url("../images/fleche_rouge.jpg");
	background-repeat: no-repeat;
	background-position: left center;
}

#vertnav ul li a
{ 
	width:172px;	
	display: block;	
	background-image: url("../images/fleche_blanche2.jpg");
	background-repeat: no-repeat;
	background-position: left center;

}

#vertnav ul li a:hover{
	padding: 3px 0 3px 18px;
    background-color:red;
	color:white; 
	background-image: url("../images/fleche_rouge2.jpg");
	background-repeat: no-repeat;
	background-position: left center;
} 

#vertnav a {
    text-decoration:none; 
    display:block;
}

#vertnav ul, #vertnav ul ul, #vertnav ul ul ul{
    display:none; 
    position:absolute; 
    top:0px; 
    left:190px;
}

#vertnav li:hover ul ul, #vertnav li:hover ul ul ul{
    display:none; 
}

#vertnav li:hover ul, #vertnav ul li:hover ul, #vertnav ul ul li:hover ul{
    display:block;
}

li>ul { 
	top: auto;
	left: auto;
}

Modifié par tinours (19 Feb 2007 - 15:33)

tinours a écrit :

/* Win IE only \*/
* html #vertnav li{
float:left;
}
/* end holly hack */

Les marchands de soupe sont nombreux dans le petit monde des CSS. A commencer par ceux qui vendent ce genre de bouillon insane. Voir la FAQ du forum, rubrique commentaires conditionnels.

Bonjour et bienvenue parmi nous, tinours

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation