Menu déroulant

Bonjour,

Je fais mes premiers pas dans le html et je n'arrive pas à faire déroulant mon menu "censé être déroulant".

Code HTML :

<div id="menu">
<ul class="niveau1">
<li class="sousmenu"><a href="#">Formation</a></li>
<ul class="niveau2">
<li><a href="#">Diplome 1</a></li>
<li><a href="#">diplome 2</a></li>
<li><a href="#">diplome 3</a></li>
</ul>
<li class="sousmenu"><a href="#">Expériences professionnelles</a></li>
<ul class="niveau2">
<li><a href="#">Stage 1</a></li>
<li><a href="#">stage 2</a></li>
<li><a href="#">stage 3</a></li>
<li><a href="#">stage 4</a></li>
</ul>
<li class="sousmenu"><a href="#">Travaux</a></li>
<ul class="niveau2">
<li class="sousmenu"><a href="#">Mémoires</a></li>
<ul class="niveau3">
<li><a href="#">Mém 1</a></li>
<li><a href="#">Mém 2</a></li>
<li><a href="#">Mém 3</a></li>
</ul>
<li class="sousmenu"><a href="#">Projets tutorés</a></li>
<ul class="niveau3">
<li><a href="#">projet 1</a></li>
<li><a href="#">projet 2</a></li>
</ul>
<li class="sousmenu"><a href="#">Dossiers</a></li>
<ul class="niveau3">
<li><a href="#">dossier1</a></li>
<li><a href="#">dossier 2</a></li>
</ul>
</ul>
<li class="sousmenu"><a href="#">Loisirs</a></li>
<ul class="niveau2">
<li><a href="#">loisir 1</a></li>
<li><a href="#">loisir 2</a></li>
<li><a href="#">loisir 3</a></li>
<li><a href="#">loisir 4</a></li>
</ul>
</ul>
</div>

Code CSS :

div#menu {width:150px}
div#menu ul {padding:0 ; width: 150px ; border:1px solid ; margin:0px}
div#menu ul li {position:relative ; list-style:none ; border-bottom:1px solid}
div#menu ul ul {position:absolute ; top:0 ; left:100px}
div#menu ul ul {text-decoration:none}
div#menu ul ul {position:absolute ; top:0 ; left:100px ; display:none}
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2 {display:block}
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {display:block}
div#menu a {background:white}
div#menu li:hover {background:green}
div#menu li.sousmenu:hover {background:green}
div#menu li a {text-decoration:none ; padding:4px 0 4px 8px ; display:block ; border-left:8px solid green ; width:84px}
div#menu li a:hover {border-left-color:green}
div#menu ul ul li a:hover {border-left-color:green}
div#menu ul ul ul li a:hover {border-left-color:green}

Je me dis que ces deux lignes doivent être fausse car c'est "display:block" qui devrait permettre aux sous menu d'apparaître. Voyez-vous une erreur ?

Merci ^^