Menu déroulant : OK sur Firefox MAIS pas sur IE

Bonjour tout le monde,
J'ai un problème de CSS que je n'arrive pas à régler . Je me tourne donc vers vous pour votre aide.

J'ai créé un menu déroulant sans javascript qui fonctionne niquel sur Firefox mais sur IE, au lieu de se dérouler sous le menu parent, il s'affiche à droite.

Je poste donc mon code pour que vous puissiez y jeter un oeil :

LE CSS

#menuDeroulant
{
	background: #fda6d3 url(images/design/menu.jpg) repeat-x;
	width: 997px;
	height: 26px;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
	font-family: Verdana;
	font-size: 12px;
}
#menuDeroulant li
{
	float: left;
	margin: 0;
	padding: 0;
	border: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
	font-weight:bold;
	display: block;
	height: 1%;
	color: #FFFFFF;
	margin: 0;
	padding: 6px 8px;
	border-right:1px solid #f67dcf;  /*barre de séparation*/
	text-decoration: none;
}

#menuDeroulant li a:hover { background-color: #cb2295;}

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

#menuDeroulant .sousMenu li
{
	float:  none;
	margin: 0;
	padding: 0;
	border: 0;
	width: 150px;
	border-right: 1px solid #ba2f7b;
	border-left: 1px solid #ba2f7b;
	border-bottom: 1px solid #ba2f7b;
	background: #fddff3;
	
}


#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
{
	color: #cb2295;
	margin: 0;
	border: 0;
	text-decoration: none;
	background: transparent;
}

#menuDeroulant .sousMenu li a:hover
{
	background-image: none;
	background-color: #c9428c;
	color: #FFFFFF;
}

#menuDeroulant li:hover .sousMenu {display: block;}

L'HTML

<ul id="menuDeroulant">
    <li>
        <a href="#">Menu 1</a>
        <ul class="sousMenu">
            <li><a href="#">Sous menu 1.1</a></li>
            <li><a href="#">Sous menu 1.2</a></li>
            <li><a href="#">Sous menu 1.3</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Menu 2</a>
        <ul class="sousMenu">
            <li><a href="#">Sous menu 2.1</a></li>
            <li><a href="#">Sous menu 2.2</a></li>
            <li><a href="#">Sous menu 2.3</a></li>
            <li><a href="#">Sous menu 2.4</a></li>
            <li><a href="#">Sous menu 2.5</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Menu 3</a>

        <ul class="sousMenu">
            <li><a href="#">sous menu 3.1</a></li>
            <li><a href="#">sous menu 3.2</a></li>
            <li><a href="#">sous menu 3.3</a></li>
            <li><a href="#">sous menu 3.4</a></li>
        </ul>
    </li>
    <li>

        <a href="#">Menu 4</a>
        <ul class="sousMenu">
            <li><a href="#">Sous menu 4.1</a></li>
            <li><a href="#">Sous menu 4.2</a></li>
            <li><a href="#">Sous menu 4.3</a></li>
            <li><a href="#">Sous menu 4.4</a></li>
            <li><a href="#">Sous menu 4.5</a></li>
            <li><a href="#">Sous menu 4.6</a></li>
            <li><a href="#">Sous menu 4.7</a></li>
            <li><a href="#">Sous menu 4.8</a></li>
            <li><a href="#">Sous menu 4.9</a></li>
        </ul>
    </li>
</ul>

Voilà ce que ça donne sous IE :
http://img154.imageshack.us/img154/6894/58534378.png

Voilà ce que ça donne sous Firefox :
http://img180.imageshack.us/img180/8393/firefox.png


Pouvez-vous m'aider s'il vous plait ???

Merci pour vos réponses
Modifié par spider (01 Mar 2009 - 16:36)

Salut,

en tant que membre actif du CCMD (Collectif Contre les Menus Déroulants ) je t'invite avant tout à lire L'accessibilité des menus de navigation en cascade.

Ton menu par exemple est inaccessible si on navigue au clavier (touche TAB) et comme IE6 n'interprète le :hover que sur les liens ça ne fonctionnera pas non plus dans ce (malheureusement encore très utilisé) navigateur.

Cela étant dit et plutôt que de lire ton code je t'invite à lire cet article : http://www.pompage.net/pompe/deroulants/ (moyennement inaccessible) ou moins pire à regarder du côté du plugin JQuery Superfish.

Bonjour,
ça répond pas vraiment à ma question mais c'est gentil comme même !!!

Concernant le site http://www.pompage.net/pompe/deroulants/, mon menu précédent, je l'avais créé à partir de ce tuto. Or il a quelques bugs. C'est justement pour ça que j'ai changé.

Celui là est niquel à part sous IE ou il s'affiche à droite.