28172 sujets

CSS et mise en forme, CSS3

[RESOLU-en partie]Menu déroulant : décalage entre IE et FF

Bonjour, je cherche à créer un menu déroulant à 3 niveaux en css (quasi) uniquement,utilisant des données sous forme de liste et compatible pour safari,FF,IE6/7.
Dans l'idée le premier et le second niveau du menu sont horizontaux, le troisième est vertical et se déroule en-dessous de l'item du niveau deux correspondant.
Le menu fonctionne sous FireFox , mais le troisième niveau est décalé à droite et s'affiche sur la même ligne que le niveau 2 sous IE7.

Etant novice dans le positionnement CSS, j'ai adapté le menu déroulant "sucker fish dropdown":
http://www.pompage.net/pompe/deroulants/

Pour comprendre le problème il suffit d'ouvrir cette page avec les 2 navigateurs:
http://css-class.com/test/bugs/ie/recalculatedoffsetbug.htm

voici d'abord le code html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="JavaScript" src="test.js"></script>
</head>
<body>
<link rel="stylesheet" type="text/css" href="test.css" />
<script type="text/javascript" src="test.js"></script>
<ul id="nav">
<li><a href="#">1</a>
	<ul>
		<li><a href="#">1.1</a></li>
		<li><a href="#">1.2</a>
		   <ul>
                        <br> <li><a href="#">1.2.1</a></li>
		        <br><li><a href="#">1.2.2</a></li>
		        <br><li><a href="#">1.2.3</a></li>
		    </ul>
		  </li>
		<li><a href="#">1.3</a>
                 <ul>
                        <br><li><a href="#">1.3.1</a></li>
		        <br><li><a href="#">1.3.2</a></li>
		        <br><li><a href="#">1.3.3</a></li>
                </ul>
                </li>
	</ul>
</li>
<li><a href="#">2</a>
	<ul>
		<li><a href="#">2.1</a>
                    <ul>
                        <br><li><a href="#">2.1.1</a></li>
		        <br><li><a href="#">2.1.2</a></li>
		        <br><li><a href="#">2.1.3</a></li>
                    </ul>
                </li>
                
		<li><a href="#">2.2</a></li>
		<li><a href="#">2.3</a></li>
		<li><a href="#">2.4</a></li>
		<li><a href="#">2.5</a></li>
	</ul>
</li>
</ul>
</body>
</html>

Le Javascript suckerfish'test.js' :
<!--//--><![CDATA[//><!--
sfHover = function()
{
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0;i<sfEls.length; i++) {
        sfEls[i].onmouseover=function(){
            this.className+="sfhover";
        }
        sfEls[i].onmouseout=function(){
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]>


Le CSS qui pose problème:
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;/*suppr les balises*/
}

#nav a {

}

#nav li 
{

position: relative;
display: inline;
}

#nav li ul {/Niveau 2 caché par défaut*/
	position: absolute;
	width: 10em;
	left: -999em;/
	
	}


#nav li:hover ul, #nav li.sfhover ul {/Affichage du niveau 2 au passage du curseur
	left:auto;
}
	

#nav li ul ul {
	display:inline;
}

#nav li:hover ul ul, #nav li.sfhover ul ul 	{
        display:none;
}

#nav li li:hover ul, #nav li li.sfhover ul {
	left: auto;
}

Le menu est inutilisable sous internet explorer, je ne sais vraiment pas comment corriger cette différence d'affichage sous IE.Toutes suggestions , idées et/ou critiques sont la bienvenue! ( Dois-je le faire en javascript?)
Merci[/i][/i]
Modifié par kurt (09 Apr 2008 - 20:42)
Sujet clos
Aller à