Menu horizontal CSS avec portes coulissantes

Bonjour,

voilà mon souci : j'ai créé un menu horizontal à 2 niveaux, sachant que pour le 1er niveau, j'utilise le principe des portes coulissantes (j'ai 2 images : 'bt_menu_left.png' sur le fond du lien du menu et 'bt_menu_right.png' sur le fond du LI). Cela fonctionne mais quand je crée le second niveau, j'ai seulement le hover sur le LI du niveau 1 qui fonctionne, pas sur le lien...

Voici mon code HTML :

<div id="menu">
	<ul>
		<li id="current"><a href="#">Tableau de bord</a></li>
		<li><a href="#">Gestion utilisateur</a>
			<ul>
				<li><a href="#">Gestion des utilisateurs</a></li>
				<li><a href="#">Gestion des roles</a></li>
			</ul>
		</li>
		<li><a href="#">Gestion du contenu</a></li>
	</ul>
</div>

Code CSS :

/* Niveau 1 */
#menu{
padding-top: 25px;
}

#menu ul{
margin:0;
padding:0;
list-style:none;
z-index: 100;
font-size: 0.9em;
}

#menu ul li{
float:left;
position: relative;
margin:0;
padding:0;
height: 27px;
margin-right: 3px;
background:url(images/bt_menu_right.png) no-repeat right top;
}

#menu ul li:hover{
background:url(images/bt_menu_right_on.png) no-repeat right top;
}

#menu ul li#current{
background:url(images/bt_menu_right_on.png) no-repeat right top;
}

#menu ul li a{
float: left;
display:block;
height: 17px;
background:url(images/bt_menu_left.png) no-repeat left top;
padding: 5px 15px 5px 15px;
text-decoration: none;
color: #000;
font-weight: 700;
}

#menu ul li a:hover{
background:url(images/bt_menu_left_on.png) no-repeat left top;
color: #fff;
}

#menu ul li#current a{
background:url(images/bt_menu_left_on.png) no-repeat left top;
color: #fff;
}

/* Niveau 2 */

#menu ul li ul{
display: none;
position: absolute;
top: 27px;
left: 0;
margin: 0;
padding: 10px 0 10px 0;
width: auto !important;
width: 200px;
list-style: none;
border-top: 1px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
background-color: #efefef;
font-family: verdana;
}

#menu ul li:hover ul{
display:block;
}

#menu ul li ul li{
position: relative;
width: 200px;
margin: 0;
background: none;
background-color: #efefef;
border:none;
padding-left: 5px;
}

html>body #menu ul li ul li{
padding-right: 12px;
}

#menu ul li ul li:hover, #menu ul li ul li.over{
background: none;
}

#menu ul li ul li a{
display: block;
border: none;
text-align: left;
text-decoration: none;
padding-left: 12px; 
width: 200px;
background: none;
color: #000;
font-weight: 400;
padding-top: 2px;
padding-bottom: 4px;
}

#menu ul li ul li a:hover{
background: none;
color: #000;
text-decoration: underline;
}

Merci de votre aide.