Problème sous menu css

Salut à tous,

Je voulais intégrer un menu horizontal déroulant en css + javascript pour mon site. J'ai donc suivi le très bon tuto de Toinouz sur le SDZ : http://www.siteduzero.com/tutoriel-3-37795-creer-un-menu-horizontal-deroulant-en-css.html

Il marche très bien, sauf que j'ai bidouillé le css pour l'adapter à mon interface et donc j'ai un petit souci.

Voici un petit schéma de la structure :

Accueil - News - Médias // Menu principal à l'horizontal

> Médias // Sous-menu déroulant de Médias
>>> Wallpapers
>>> Le Site >>>>>>> Contact // Sous-menu déroulant de Le Site
>>>>>>>>>>>>>>>>> Mentions Légales
>>>>>>>>>>>>>>>>> Liens

Wallpapers et Le Site devraient être l'un en dessous l'autre, mais là il se retrouve l'un à côté de l'autre. Voir ci dessous :
http://www.siteduzero.com/uploads/fr/files/178001_179000/178009.jpg

Cela fait une bonne 1/2 heure que j'essaye tout et n'importe quoi mais rien à faire...
Pourriez-vous m'aider ?

Merci

<ul id="menu">
	<li><a href="accueil.html">Accueil</a></li>
	<li><a href="news.html">News</a></li>
	<li><a href="#">M&eacute;dias</a>
		<ul id="sous_menu">
			<li><a href="#">Wallpapers</a></li>
			<li><a href="#">Le Site</a>
			<ul>
				<li><a href="#">Contact</a>
				<a href="#">Mentions Légales</a>
				<a href="#">Liens</a></li>
			</ul>
			</li>
		</ul>
	</li>
</ul>

@charset "utf-8";
/* CSS Document */

#menu, #menu ul /* Liste */     
{
        padding : 0; /* pas de marge intérieure */
        margin : 0; /* ni extérieure */
        list-style : none; /* on supprime le style par défaut de la liste */
        line-height : 30px; /* on définit une hauteur pour chaque élément */
        text-align : center; /* on centre le texte qui se trouve dans la liste */
}

#menu /* Ensemble du menu */
{
        font:bold 13px Arial, Helvetica, sans-serif;
		margin-left:280px;
}

#menu a 
{
	display:block; 
	font:bold 13px Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	width:65px;
	margin-top:0px;
	margin-right:auto;
	margin-left:auto;
	height:30px;
	text-decoration:none;
	display:table-cell;
	vertical-align:middle;
}

#menu a:hover
{
	background-color:#000000;
	filter: Alpha(Opacity="40");
	opacity: 0.4;
}

#menu li /* Elements des listes */      
{ 
        float : left;
        /* pour IE qui ne reconnaît pas "transparent" */
        border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
}

/* Sous Menu */ 

#sous_menu, #sous_menu ul /* Liste */     
{
        padding : 0; /* pas de marge intérieure */
        margin : 0; /* ni extérieure */
        list-style : none; /* on supprime le style par défaut de la liste */
        line-height : 15px; /* on définit une hauteur pour chaque élément */
        text-align : center; /* on centre le texte qui se trouve dans la liste */
}

#sous_menu /* Ensemble du menu */
{
        font:bold 13px Arial, Helvetica, sans-serif;
}

#sous_menu a /* Contenu des listes */
{
        display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
        padding-left:5px; /* aucune marge intérieure */
        background-color:#111218;
		filter: Alpha(Opacity="95");
		opacity: 0.95;     
        color : #fff; /* couleur du texte */
        text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
		text-align:left;
        width : 150px; /* largeur */
		height:18px;
}

#sous_menu a:hover
{
	background-color: #3F4869;
	filter: Alpha(Opacity="80");
	opacity: 0.8;
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
        border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}

#menu li ul /* Sous-listes */
{
		position: absolute; /* Position absolue */
        left: -999em; /* Hop, on envoie loin du champ de vision */
}

#menu li ul li /* Éléments de sous-listes */
{
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li                
{
        border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}

#menu li ul ul 
{
        margin    : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */ 
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        border-left     : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */      
}

/* IE ne reconnaissant pas le sélecteur ">" ... je me répète  [cligne] */
html>body #menu li ul ul                
{
        border-left     : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
}

#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
        left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
        left: auto; /* Repositionnement normal */
        min-height: 0; /* Corrige un bug sous IE */
}

Modifié par Ben5back (02 Jul 2009 - 17:56)

Normal, tes #sousmenus li héritent du float:left.

Ah bah oui ! C'est bon maintenant. Merci loicbcn

Considères-tu donc le problème comme étant [résolu] ?