Problème de focus avec menu déroulant

Bonjour,
J'interviens sur un menu déroulant.
J'ai quelque peu décallé (vers le bas) la liste déroulante des items principaux pour obtenir une présentation plus aérée.
Le problème est que la liste apparait bien au survol du lien mais quand je descend la souris, et que le pointeur sort de la zone du lien la liste déroulante se referme (ce qui est normal).

J'ai bien essayé d'agrandir la zone du lien mais ça ne marche pas.
Voici mon code html :

<li id="menu_03"><a href="/fr/produits.htm" ></a>
					<ul id="smenu3">
					    <li><a href="/fr/xxx.htm">xxx</a></li>
					    <li><a href="/fr/yyy.htm">yyy</a></li>
					    <li><a href="/fr/zzz.htm">zzz</a></li>
					</ul>
				</li>

et pour la css

li#menu_03 a { 
	width: 100px;
	height: 50px;
	 
}


li#menu_03 ul.smenu3  {
	width: 104px;
	text-indent: 2px;	
}

#smenu3 {
	width: 104px;
	text-indent: 2px;
	font-size: 9px;
}


#smenu ul {
	margin: 0px;
	padding:0px;
}

#smenu li ul {
	/* listes du deuxième niveau */
	position: absolute;
	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 */
	z-index: 99;
	margin-top: 4px;
	padding:0px;
	border: solid 1px #666666;
}
#smenu li ul li {
	/*float:left;*/
	/* li du deuxième niveau */
	height: auto;/* 14px;*/
	width: 100%;/*110px;*/
	background: #D6D6D6;
	margin:0px;
	padding:0px;
}

#smenu li ul li a { /* liens du deuxième niveau */
	/*float:left;*/
	height: auto;/* 14px;*/
	width: auto;/*110px;*/
	padding: 2px 5px;
	margin:0px;
	text-decoration: none;
	color: #666666;
}

#smenu li ul li a:hover { /* liens survolés du deuxième niveau */
	background-color: #999999;
	color: #FFFFFF;
}

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

Avez vous une idée d'une astuce ?

Merci pour vos tuyaux