Pourquoi mon menu n'est pas compatible IE

Bonjour à tous

En ce samedi matin je me fait des nœuds au cerveau.
Je suis entrain de faire un menu déroulant sur deux niveaux de profondeur. Sur FF c'est bon mais pas sur IE pas du tout.

Voir le reste des explications après le code ...

voila le code HTML :

<div id="menu-bar">
<ul id="main-menu">
    <li class="main"><a class="main-link" href="#">Menu 1</a>
    	<ul class="level-1">
        	<li><a class="link-level-1" href="#" title="Menu niv 1 pour le test">Menu niv 1 pour le ...</a>
            	<ul class="level-2">
                	<li><a class="link-level-2" href="#" title="Menu niv 2">Menu niv 2</a></li>
                	<li><a class="link-level-2" href="#" title="Menu niv 2">Menu niv 2</a></li>
                	<li><a class="link-level-2" href="#" title="Menu niv 2">Menu niv 2</a></li>
            	</ul>
            </li>
        	<li><a class="link-level-1" href="#" title="Menu niv 2">Menu niv 1</a></li>
        </ul>
    </li>
    <li class="main"><a class="main-link" href="#">Menu 2</a></li>
</ul>
</div>

Bon je sais il y a des classes de partout et en plus le tous est enveloppé dans une div en plus du ul, mais j'en ai besoin pour plus tard.

Et voila le CSS désolé ça va être un peut long :

#menu-bar {
	height: 20px;
	font-size: 85%;
	border: 1px solid #999;
}
#menu-bar #main-menu, 
#menu-bar #main-menu .level-1, 
#menu-bar #main-menu .level-1 .level-2 {
	list-style-type: none;
	height: 20px;
	float: left;
	padding: 0;
	margin: 0;
}
#menu-bar .main-link,
#menu-bar .link-level-1,
#menu-bar .link-level-2 {
	display: block;
	text-decoration: none;
	line-height: 20px;
	font-weight: bold;
	color: #666;
}
#menu-bar .main-link {
	width: 135px;
}
#menu-bar .link-level-1,
#menu-bar .link-level-2 {
	width: 165px;
	padding: 0 10px 0 25px;
	text-align: left;
}
#menu-bar a:hover {
	color: #333;
}
#menu-bar #main-menu .main {
	position: relative;
	float: left;
	text-align: center;
}
#menu-bar .main-link {
	border-right: 1px solid #999;
}
#menu-bar #main-menu .level-1 {
	position: absolute;
	width: 342px;
	left: -1px;
	visibility: hidden;
}
#menu-bar #main-menu .level-1 .level-2 {
	border-top: 1px solid #999;
	width: 170px;
	float: left;
	visibility: hidden;
}
#menu-bar #main-menu .level-1 .level-2 li {
	border-left: 1px solid #999;
	border-right: 1px solid #999;
}

#menu-bar #main-menu .level-1 .link-level-1 {
	width: 135px;
	border-bottom: 1px solid #999;
	border-left: 1px solid #999;
	border-right: 1px solid #999;
	float: left;
}
#menu-bar #main-menu .level-1 .link-level-2 {
	width: 134px;
	border-bottom: 1px solid #999;
}

#menu-bar #main-menu li:hover .level-1 {
	z-index: 100;
	visibility: visible;
}
#menu-bar #main-menu .level-1 li:hover .level-2 {
	z-index: 100;
	visibility: visible;
}

Sur FF c'est nickel ça fonctionne très bien. Mais mon ami IE ( ) ne fonctionne pas. je ne peux pas atteindre le premier niveau et accessoirement, le deuxième aussi.

Est-ce que vous voyer pourquoi ?

Merci d'avance de votre aide.
Modifié par nickleus (09 May 2009 - 09:46)

Bonjour,

Quelle version de Internet Explorer: 5, 5.5, 6, 7, 8 ?

IE 7, mais je ne sais pas si ça fonction pour les précédentes !