28173 sujets

CSS et mise en forme, CSS3

Menu CSS qui ne marche pas sous IE

Bonjour,

je souhaite faire un menu en css. Mon problème est qu'il fonctionne très bien sous Firefox, mais pas du tout sous IE. d'où peut provenir mon erreur ?

Voici le code tel qu'il est actuellement :

<html>

<head>
<title>MENU qui ne marche pas sous IE</title>

<style type="text/css">


#menuHaut {
	position: absolute;
	padding: 0em 0em 0em 0em;
	font-size: 1em;
	top: 0em;
	left: 0em;
}

#menuHaut ul li {
	position: relative;
	background: #280080;
	color: #FFFFFF;
	padding: .5em 0em .5em 2em;
	font-size: .8em;
	float: left;
	list-style: none;
	font-weight: bold;
}

#menuHaut ul li a	{
	text-decoration: none;
	color: #FFFFFF;
}

#menuHaut li:hover > .sousMenu {
	margin-top: .5em;
	display: block;
}

#menuHaut .sousMenu {
	display: none;
	background: #280080;
	margin: 0em 0em -1em -2em;
	border: 0em;
}

#menuHaut ul li div a {
	margin: 0em 0em 0em 0em;
	padding: .5em .5em .5em .5em;
	display: block;
	color: #FFFFFF;
	font-size: .8em;
}

#menuHaut ul li div a:hover {
	margin: 0em 0em 0em 0em;
	padding: .5em .5em .5em .5em;
	color: #FFFFFF;
	border: 0em;
	text-decoration: none;
	background: #a6caf0;
}
</style>
</head>
<body>

<div id="menuHaut">
	<ul>
		<li>
			<a href="#">Accueil du site</a>
		</li>
		<li>
			titre 1
			<div class="sousMenu">
				<a href="spip.php?article2">sous titre 1</a>
				<a href="spip.php?article3">sous titre 2</a>	
			</div>
		</li>
		<li>
			<a href="#">titre 2</a>
		</li>
		<li>
			<a href="#">titre 3</a>
		</li>
		<li class="last">
			<a href="#">Titre 4</a>
			<div class="sousMenu">
				<a href="#">sous titre 1</a>
				<a href="#">sous titre 2</a>	
			</div>
		</li>
	</ul>
</div>

</body>
</html>
bonjour math,

c'est parceque IE ne supporte pas :
1. la propriété hover sur les balises autres que a (toi tu as un li:hover qu'il ne peut comprendre)
2. la compréhension des sélecteurs ">" :
#mondiv a:hover > ul {.......}
qui permet de modifier le style d'une balise X ("ul" dans cet exemple") lorsqu'un évenement (ici ":hover" pour le survol de la balise "a" avec la souris) apparait sur une balise Y (ici la balise survolée est la balise "a").

Dand ton code, tu as : "(...)#menuHaut li:hover > .sousMenu {(...)" => ton code CSS utilises ces 2 propriétés inconnues ou mal traitées par IE , du coup , ton menu ne peut pas y fonctionner tel quel.

Il y a des alternatives. je te conseille cet article là :
http://www.xs4all.nl/~peterned/csshover.html
http://www.xs4all.nl/~peterned/csshover.html
[/url]
Sujet clos
Aller à