28172 sujets

CSS et mise en forme, CSS3

Bug IE sur menu déroulant vertical

Bonjour,

Je viens de me faire un petit menu déroulant qui marche bien sous Firefox ou Safari mais j'ai un problème sous IE.
Lorsque l'on passe sur le premier LI qui affiche la sous liste imbriqué, celle ci apparait avec un décalage sur la droite et non en dessous. J'ai plutot l'habitude de travailler en flottant et pas en position absolu, du coups je suis un peu perdu...

Pour ceux qui veulent tester : http://supercanard.phpnet.org/bordel/menu_deroulant.htm

Si quelqun à une idée... 


<style type="text/css">
body,html {
font-family: Arial, Helvetica, sans-serif;
}
#menu {
width: 600px;
margin: 0 auto 0 auto;
}
/* MENU */
#menu ul {
overflow: hidden;
list-style: none;
padding: 1px;
background: #1e1e1e;
}
#menu ul li {
float: left;
padding-left: 0;
margin-left: 0;
}
#menu ul li a {
display: block;
float: left;
width: 130px;
padding: 5px;
font-size: 12px;
color: #fff;
text-decoration: none;
text-align: center;
cursor: default;
}
#menu ul li a:hover {
background: #4b5d6e;
}
#menu ul li ul {
display: none;
position: absolute;
list-style: none;
margin-top: 27px; /* A ajuster suivant le font-size de #menu ul li a */
background: #4b5d6e;
}
#menu ul li ul li {
clear: both;
}
#menu ul li ul li a {
cursor: pointer;
}
#menu ul li ul li a:hover {
background: #b1c3d9;
}
</style>

<script type="text/javascript" language="javascript">
function bund_display(elementid)
{
	if (document.getElementById(elementid).style.display == 'none')
	{
		document.getElementById(elementid).style.display = 'block';
	}
	else {
		document.getElementById(elementid).style.display = 'none';
	}
}
function montre_id(elementid) {
	document.getElementById(elementid).style.display = 'block';
}
function cache_id(elementid) {
	document.getElementById(elementid).style.display = 'none';
}
</script>
</head>

<body>

<div id="menu">
<ul>
<li><a onmouseover="montre_id('sm1'); cache_id('sm2');" onclick="cache_id('sm1');" href="#">Menu 1</a>
	<ul id="sm1">
		<li><a href="#">Sous Menu 1</a></li>
		<li><a href="#">Sous Menu 1</a></li>
		<li><a href="#">Sous Menu 1</a></li>
	</ul>
</li>
<li><a onmouseover="montre_id('sm2'); cache_id('sm1')" onclick="cache_id('sm2');" href="#">Menu 1</a>
	<ul id="sm2">
		<li><a href="#">Sous Menu 2</a></li>
		<li><a href="#">Sous Menu 2</a></li>
		<li><a href="#">Sous Menu 2</a></li>
	</ul>
</li>
</ul>
</div>
J'ai pas vraiment le temps de rentrer dans le détail (je cherche à resoudre un bug et google m'a attiré par là Smiley cligne )

Mais, il y a quelques années, j'ai codé un truc dans le style qui marche ...

Va voir le code ici : http://www.afpic.com

Ma solution est dans la détection de navigateur et d'include de feuille de style approprié ....

J'espère que ca va te mettre sur la bonne voie Smiley rolleyes

AC
____________________________________
http://www.alexandre-chevallier.fr
Sujet clos
Aller à