Modifier menu accordéon en horizontal

Bonjour j'ai suivi le tuto "Créer un menu “accordéon” avec jQuery". J'y suis heureusement parvenu.
Cependant j'ai un problème car je veux que tout mes menus soit sur le même ligne, j'ai donc rajouter dans le code CSS :

#navigation li { 
	display : inline;
	}

Sauf que ça ne donne aucun résultat.
Alors quelqu'un est-il en mesure de m'aider ?

Merci d'avance

Commence par retirer le paramètre width dans "#navigation". Puis :

#navigation li {
    float:left;
    width:200px;
}

Par contre en testant je vois que ça s'affiche bien mais ça génère un bug dans le comportement : le bloc se déplie mais se repli aussitôt.

Du coup il faut ajouter dans "#navigation .subMenu" :

overflow:hidden;

Merci beaucoup cela m'a bien aidé. L'aspect que je voulais donné à mon menu a grâce à cela pu atteindre mes espérances.
Cependant dans la pratique, il y a un nouveau problème. Lorsque je déroule les sous menu, le texte qui se trouve en dessous bouge en fonction de ceux-ci.
N'existe-t-il pas un moyen pour ses sous-menus soit comme une sorte de calque qui se superpose à tout ce qui se trouve en dessous lorsqu'ils sont déroulés ?

Il faut positionner les sous-menu en absolute, mais il va de ce fait valoir les repositionner.

Comment faire pour passer aussi les sous-menus en horizontal ? Autrement dit, plutôt que d'avoir un menu déroulant avoir quelque chose de semblable a ce site : http://www.goodplanet.info/goodplanet/index.php/fre/