Menu Firefox IE6/7

Bonjour, j'ai fais un menu css qui fonctionne vient sous Firefox et Opera, mais pas sous IE7 et IE6. J'aimerais savoir quoi modifié pour que sa fonctionne bien. Voici le code:

Css:

#menu {
	position: relative;
	width: 1022px;
	height:28px;
	background-color: #f1f7fb;
	border-bottom: solid #123b57 1px;
	font: 1em Georgia, Times, serif; 
	text-transform: uppercase;
	letter-spacing: 0.1em;
	line-height: 2.2em;
	margin: 0 0 0 0px;
	padding: 0;
	list-style: none;
}

#menu li {
	float: left;
	display: block;
	margin-left: 13px;
	overflow: hidden;
}

#menu li a {
	text-decoration: none;
	color: #333333;
	padding-left: 20px;
	background: url(../images/diamond.gif) no-repeat left;
}

#menu li a:hover {
	color: #d66500;
	padding: 0 0 0 20px;
}

#menu .SubMenu {
	display: none;
	position: absolute;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
}

#menu .SubMenu li {
	float: none;
	margin: 0;
	padding-right: 15px;
	border-left: solid 1px;
	border-right: solid 1px;
	border-bottom: solid 1px;
	background-color: #f1f7fb;
}

#menu .SubMenu li:hover {
	background-color: #BFDDE6;
}

#menu .SubMenu li a {
	background: none;
	display: block;
	width: 97%;
	font: 0.9em Georgia, Times, serif; 
	text-transform: capitalize;
	line-height: 2.2em;
}

#menu .SubMenu li a:hover {
	color: #333333;
}

#menu li:hover > .SubMenu { 
display: block;
}

Html:

<ul id="menu">
	<li><a href="#">Acceuil</a></li>
	<li>
	<a href="#">À propos de nous</a>
		<ul class="SubMenu">
			<li><a href="#">Notre histoire</a></li>
			<li><a href="#">Règlements municipaux</a></li>
			<li><a href="#">Budjet 2007</a></li>
		</ul>
	</li>
	<li>
	<a href="#">Nos services</a>
		<ul class="SubMenu">
			<li><a href="#">Munnicipaux</a></li>
			<li><a href="#">Communautaires</a></li>
			<li><a href="#">Commerciaux</a></li>
		</ul>
	</li>
	<li>
	<a href="#">Le conseil</a>
		<ul class="SubMenu">
			<li><a href="#">Membres du conseil</a></li>
			<li><a href="#">Séances du conseil</a></li>
		</ul>
	</li>
	<li><a href="#">Nous joindre</a></li>
</ul>

bonjour

un début de solution se trouve evidement içi :

a écrit :
#menu li:hover > .SubMenu {

display: block;

}

çà, ie ne le comprend pas.

une solution que j'exploite pour passer outre les manques du hover d'ie.

un fichier js simple et léger :

sfHover = function() {
	var sfEls = document.getElementById("menu2").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);

un css possible :

#menu2 {
position: relative;
background-color: transparent;
}
#menu2, #menu2 ul {
padding: 0;
margin: 0;
list-style: none;
}
#menu2 ul a:link, #menu2 a:visited {
display: block;
border: none;
text-decoration: none;
text-align: left;
padding: 2px 5px;
color: #FFF;
}
#menu2 ul a:hover {
background-color: #F90;
color: #999;
}
#menu2 li {
padding: 3px 5px;
margin: 0;
color: #999;
}
#menu2 li ul {
position: absolute;
top: 8px;
left: 5px;
border: 1px solid #AAA;
background-color: #CCC;
display: none;
}
#menu2 li:hover ul, #menu2 li.sfhover ul {
display: block;
width: 198px;
}

à adapter à vos codes, fonctionne avec tous les navigateurs et systèmes linux, windows et à priori, avec mac, mais je n'en suis pas sur.
[/i][/i]
Modifié par keran (07 Apr 2007 - 00:03)