Menu Horizontal problématique

Bonjour,
Tout d'abord désolé si j'aborde surement un sujet déjà "résolu", mais je sèche vraiment sur ce "cas" particulier.

Voilà, je cherchait à faire un menu déroulant horizontal, seulement voilà, tout ceux que je trouvais avec une liste de sous menu "fixe". Comprenez de la même taille fixe quoi.
Puis je suis tombé sur un code qui m'a bien plus : http://phoenity.com/newtedge/horizontal_nav/

je m'en suis alors largement inspiré de la version inline, la version block ne me plaisant pas du tout.
Voici mes codes :
Xhtml

<ul class="menu">
<li><a href="#">Accueil</a></li>
	<li>
	Liste
	<ul>
	<div class="fond_menu">
	<li><a href="#">Liste des actualités</a></li>
	<li><a href="#">Liste des dossiers</a></li>
	<li><a href="#">Liste des tests</a></li>
	<li><a href="#">Liste des tests arcades</a></li>
	<li><a href="#">Liste des previews</a></li>	
	</div>
	<div id="bas_gauche_menu"></div><div id="bas_droit_menu"></div><div id="bas_menu"></div><div id="ombre_menu"></div>
	</ul>
	</li>
	<li>
	Rédiger
	<ul>
	<div class="fond_menu">
	<li><a href="#">Rédiger un test ou une préview</a></li>
	<li><a href="#">Rédiger une actu ou un dossier</a></li>	
	</div>
	<div id="bas_gauche_menu"></div><div id="bas_droit_menu"></div><div id="bas_menu"></div><div id="ombre_menu"></div>
	</ul>
	</li>
	<li>
	Gérer
	<ul>
	<div class="fond_menu">
	<li><a href="#">Plateformes</a></li>
	<li><a href="#">Puces</a></li>	
	<li><a href="#">Images</a></li>
	</div>
	<div id="bas_gauche_menu"></div><div id="bas_droit_menu"></div><div id="bas_menu"></div><div id="ombre_menu"></div>
	</ul>
	</li>
</ul>

Css

.menu {
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	float:left;
	margin-left : 4px;
	}
ul.menu,.menu ul {
	/*Remove all spacings from the list items*/
	/*margin: 0;*/
	/*margin-left: auto;*/
	padding: 0;
	cursor: default;
	list-style-type: none;
	display: inline;
   	/*margin-right: auto;*/
	margin-top:0px;
	 }
.menu li {
	font-weight:bold; }
.menu li li {
	/*font-weight:normal;*/
	/*background-color : #d00000;*/
	/*background-image:url("fond/motif.png");*/
	font-size:12px;
	/*border-right : 1px solid black;
	border-left : 1px solid black;*/ }
.menu li ul {
padding-top:1px;
 
	/*background-color : #d00000;*/
	/*background-image:url("fond/motif.png");
	background-repeat:repeat;*/
	/*border : 1px solid black;*/
	/*border-bottom : 1px solid black;*/ }
.fond_menu
{
	border : 1px solid black ;
	background-color : #d00000;
	/*background-image:url("fond/motif.png");
	background-repeat:repeat;*/
	/*border-top: 1px solid #d00000;*/
	border-top:0px;
	border-bottom:0px; }
#bas_gauche_menu {
	float:left;
	background: url("fond/bas_gauche.png");
	height: 13px; width: 11px;
	background-repeat: no-repeat; }
#bas_droit_menu {
	float: right;
	background: url("fond/bas_droit.png");
	height: 13px; width: 11px;
	background-repeat: no-repeat; }
#bas_menu {
	margin-left:11px;
	margin-right:11px;
	height: 10px;
	background-color : #d00000; 
	/*background-image:url("fond/motif.png");
	background-repeat:repeat;*/
	border-bottom : 1px solid black; }
ul.menu {
	display: table;
	 }
ul.menu>li{
	display: table-cell;
	position: relative;
	padding: 2px 6px;
	 }
ul.menu li>ul {
/*Make the sub list items invisible*/
	display: none;
	position: absolute;
	max-width: 40ex;
	margin-left: -6px;
	margin-top: 2px;
	 }
ul.menu li:hover>ul {
/*When hovered, make them appear*/
	display : block; 
	}
.menu ul li a {
/*Make the hyperlinks as a block element, sort of a hover effect*/
	display: block;
	padding: 2px 10px;
	}
/*** Menu colors (customizable) ***/
ul.menu, .menu ul, .menu ul li a{
	/*background-color: #fff;*/
	/*color: #369;*/
	color:white;
	/*background-color:#d80000;*/ }
ul.menu li:hover, .menu ul li a:hover {
	/*background-color: #369;*/
	/*#c0c0c0*/
	color: black; }
ul.menu li:active, .menu ul li a:active {
	/*background-color: #036;*/
	color: black; }
/*ul.menu, .menu ul {
	/*border: 1px solid black;
	border-top:0px;*/
	/*background-image:;*/
	/*background-color:#d80000;*/
	/*background-image:url("fond/motif.png");
	background-repeat:repeat; }
/*ul.menu, .menu li {
	background-color:#d80000; }*/
.menu a {
	text-decoration: none;
	/*background-color: #fff;*/
	/*color: #369;*/
	color:white; }
.menu a:active {
	/*background-color: #036;*/
	color: black; }
.menu a:hover {
	/*background-color: #369;*/
	color: black; }
#search {
	margin-top:1px;
	float:right;
	margin-right : 4px; }
#ombre {
	height : 2px;
	background-image:url("fond/ombre.png"); }
#ombre_menu {
	height : 2px;
	margin-left:11px;
	margin-right:11px;
	background-image:url("fond/ombre.png"); }

Sous Firefox le résultat est vraiment plaisant, dont voici une image :

http://img27.imageshack.us/img27/7589/preview2vn0.th.jpg

Malheureusement, Internet Explorer lui ne fait rien comme tout le monde ce crétin :
http://img89.imageshack.us/img89/8462/iepreviewqe1.th.jpg

Je ne suis pas un gros débutant en CSS, mais loin d'être un pro je l'avoue. Malheureusement j'ai eu beau cherché, j'arrive pas à mettre la main sur le problème... Pourtant le menu s'affiche comme il faut, enfin quand on passe sur un élément la sous-liste s'affiche, mais le menu ne s'affiche pas à l'horizontal...
Modifié par Ryuuku (14 Feb 2009 - 17:16)