28172 sujets

CSS et mise en forme, CSS3

Probleme menu internet explorer

bonjour, j'ai réalise un menu déroulant assez simple en css. mais trop compliqué pour internet explorer qui l'interprète mal comme dab...
visuellement ça donne ça

firefox:
upload/20216-menuff.gif

ie:
upload/20216-menuie.gif

mon pb sur explorer est que ma liste deroulante passe en dessous de mon menu principal.
j'ai bien joué avec les z-index, je ne trouve pas la solution !
quelqu'un pourrait t-il m'aider ?? merci d'avance

le code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
body {
	margin:0;
	padding:0;
}
 ul {
	width:600px;
	list-style-type:none;
	margin:0;
	padding:0;

}

li {
	float:left;
	height:20px;
	border:1px solid #FFFFFF;
	background: #333333;
	color:#FFFFFF;
	position:relative;

}
ul li ul li {
	float:none;
	background: #FF0000;

}

ul li ul {
	position:absolute;
	left:0px;
	top:20px;
	width:200px;
	z-index:1;
}
a {
	color:#FFFFFF;
}


</style>
</head>

<body>


<ul>

	<li onmouseover="document.getElementById('sous_liste1').style.display='block';" onmouseout="document.getElementById('sous_liste1').style.display='none';"><a href="#">menu1</a>
    	<ul id="sous_liste1" style="display:none;">
        	<li>menu2</li>
        	<li>menu2</li>
            <li>menu2</li>
        	<li>menu2</li>            
        	<li>menu2</li>
        	<li>menu2</li>            
        	<li>menu2</li>                        
        </ul>
    </li>
    
	<li onmouseover="document.getElementById('sous_liste2').style.display='block';" onmouseout="document.getElementById('sous_liste2').style.display='none';"><a href="#">menu1</a>
    	<ul id="sous_liste2" style="display:none;">
        	<li>menu2</li>
        	<li>menu2</li>
            <li>menu2</li>
        	<li>menu2</li>            
        	<li>menu2</li>
        	<li>menu2</li>            
        	<li>menu2</li>                        
        </ul>
    </li>
    
	<li>menu1</li>
    <li>menu1</li>
	<li>menu1</li>
	<li>menu1</li>
    <li>menu1</li>
    <li>menu1</li>
    <li>menu1</li>
	<li>menu1</li>
    <li>menu1</li>
	<li>menu1</li>
	<li>menu1</li>
    <li>menu1</li>
    <li>menu1</li>
    <li>menu1</li>
	<li>menu1</li>
    <li>menu1</li>
	<li>menu1</li>
	<li>menu1</li>
    <li>menu1</li>
</ul>



</body>
</html>

Modifié par mouze (15 May 2009 - 14:50)
Hello,

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 après le crochet ouvrant).

upload/1-code.gif

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

D'ailleurs, je rappelle que l'Aide (dont le lien est fourni lors de l'inscription) contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.

Bonne continuation Smiley smile
Sujet clos
Aller à