[Tuto Menu deroulant vertical CSS] Probleme pour le faire évoluer

Bonjour à tous !

Je voudrais faire un menu déroulant basé sur les CSS. J'ai donc effectué le tuto approprié.

L'idée du menu étant un menu vertical à 2 niveaux. Le premier niveau se déroule en dessous des titres principaux comme ce tutorial suivant :
http://css.alsacreations.com/xmedia/exemples/deroulant/menu-vertical.htm#[/url]
Ensuite, le 2eme niveau se deroule sur le coté droit.

N'ayant pas trouvé de solution sur Alsacréations pour implémenter un menu vertical à plusieurs niveaux. J'ai trouvé une solution sur le site Pompage.net pour avoir un menu suivant :
http://www.pompage.net/IMG/html/deroulants/exemple_2_niveau.html[/url]

Le probleme c'est qu'il s'agit d'un menu horizontal et non vertical. J'essayais donc de faire un mix des deux approches. Le probleme c'est que lorsque le menu de niveau se déroule, il chevauche les titres du menu alors que dans l'exemple d'Alsacréations les titres sont automatiquement décalés vers le bas pour laisser le sous-menu s'afficher.

Je suis vraiment débutant pour les CSS, donc si vous pouviez m'aider ...

// Page HTML

<ul id="MNU_Main">

<li><a href="#">Menu 0 </a>
	<ul>
		<li><a href="#">Menu 0.0</a>
			<ul>
			<li><a href="#">Menu 0.0.0</a></li>

			<li><a href="#">Menu 0.0.1</a></li>
			</ul>
		</li>

		<li><a href="#">Menu 0.1</a>
			<ul>
			<li><a href="#">Menu 0.1.0</a></li>
			<li><a href="#">Menu 0.1.1</a></li>

			</ul>
		</li>

	</ul>
</li>
<li><a href="#">Menu 1</a>
	<ul>
		<li><a href="#">Menu 1.0</a>
			<ul>

			</ul>
		</li>

		<li><a href="#">Menu 1.1</a>
			<ul>
			</ul>
		</li>

		<li><a href="#">Menu 1.2</a>

			<ul>
			</ul>
		</li>

	</ul>
</li>
<li><a href="#">Menu 2</a>
	<ul>
		<li><a href="#">Menu 2.0</a>

			<ul>
			</ul>
		</li>

	</ul>
</li>
</ul>

// Javascript

<script type="text/javascript">
<!--
sfHover = function() 
{
	
	var sfEls = document.getElementById("MNU_Main").getElementsByTagName("LI");
	
	for (var i=0; i<sfEls.length; i++) 
	{
		sfEls[i].onmouseover=function() 
		{
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function()
		{
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//-->
</script>

// CSS

#MNU_Main, #MNU_Main ul { /* toutes les listes */
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#MNU_Main a {
	display: block;
	width: 10em;
}

#MNU_Main li { /* tous les items de liste */
	float: left;
	width: 10em; /* largeur obligatoire, sinon opera devient fou */
}

#MNU_Main li ul { /* listes de deuxième niveau */
	position: absolute;
	background: orange;
	width: 10em;
	left: -999em; /* on met left plutôt que display pour cacher les menus parce que display: none n'est pas lu par les lecteurs d'écran */
}

#MNU_Main li:hover ul, #MNU_Main li.sfhover ul { /* listes imbriquées sous les items de listes survolés */
	left: auto;
}

[/i][/i]