Menu déroulant ( css )

Bonjour, Je vient de débuter la création d'un site et je m'attaque au menu, avec une sous liste que je veux faire apparaitre quand on passe sur le lien "Dossiers" . problème, j'arrive à le faire disparaitre mais pour ce qui est de le faire réapparaitre ça ne marche pas.
Voila mes codes :

html :

<div id="menu">
<ul>
<li><a href="">Accueil</a></li>
<li><a href="" style="margin-left: 50px;">Dossiers</a></li>
</ul>
</div>

<div id="liste">
<ul>
<li><a href="">Historique</a></li>
<li><a href="">Franchises</a></li>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
</ul>
</div>

CSS :

#menu /* Ensemble du menu */
{
padding-top: 120px;
font-weight : bold; /* on met le texte en gras */
font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
font-size : 14px; /* hauteur du texte : 14 pixels */
}
#menu li
{
float: left;
list-style: none;
}
#menu a
{
color: white;
text-decoration: none;
}
#menu a:hover
{
color: blue;
}

#liste
{
margin-top: 50px;
margin-left: 110px;
}
#liste li
{
border: solid #00127e 2px;
list-style: none;
text-align: center;
width: 100px;
height: 22px;
margin-left: 30px;
float: left;
background: url(smenu.png);
display: none;
}
#liste a
{
color: white;
text-decoration: none;
}
#liste a:hover
{
color: blue;
}
#menu a:hover #liste ul li
{
display: block;
}

Voila, si vous pourriez m'aider svp :)