Problème sous-menu déroulant

Bonjour,

J'aurais besoin de votre précieuse aide pour résoudre un problème sur un menu déroulant :

C'est un menu horizontal réalisé avec Jquery. Le problème est le suivant :

Quand je survole un lien dans le sous-menu qui se déroule, si je laisse un peu la souris dessus ou si je fais un clic droit, il apparait le background du menu principal : ce qui n'est pas joli du tout !

Vous pouvez voir le problème ici : http://www.as-globalservices.com/emassist/
(c'est un site que je construit pour une consoeur)

Je vous colle les portions de code concernées :

HTML :

	<div id="navigation">
		<div class="premier">
	<a href="index.php" title="...">Accueil</a>
	</div>
	
	<div>
	<a href="#" title="...">Avantages</a>
	</div>
	<div>
	<a href="#" title="...">Services</a>
	<ul style="display: none;">
		<li><a href="#" title="...">Service 1</a></li>
		<li><a href="#" title="...">Service 2</a></li>
		<li><a href="#" title="...">Service 3</a></li>
...

CSS :

#navigation {
	clear: both;
	margin: 0;
	padding: 0;
	height: 70px;
	background: url(../images/navigation.png) no-repeat;}
	
#navigation div{
	float: left;
	width: 165px;
	margin: 0;
	padding: 0;
	text-align: center;}
	
#navigation div a{
	display: block;
	color: white;
	font-size: 1.5em;
	font-weight: bold;
	line-height: 70px;
	text-decoration: none;}
	
#navigation div.premier{
	padding-left: 17px;}
	
#navigation div a:hover, #navigation div a:focus{
	text-decoration: none;
	border: none;
	padding: 0;
	height: 70px;
	background: transparent url(../images/onglet-actif.png) no-repeat;
	background-position: 1px 7px;
	color: #4096ee;}
	
#navigation div ul{
	position: absolute;
	margin:0;
	background-color: #356aa0;
	line-height:20px;
	border :5px solid white;
	width:300px;}
	
#navigation ul, #navigation li {
	margin: 0;
	padding: 0;
	list-style-type: none;
	list-style-position:outside;}

#navigation ul li {
	padding:5px;
	font-size:0.8em;}

#navigation ul li a {
	color: white;
	text-align: left;
	line-height: 20px;
	text-decoration: none;}

#navigation ul li a:hover {
	background: #f5f5f5;
	color: #356aa0;
	line-height: 20px;
	height: 20px;}

Comme vous voyez, j'ai tenté en vain de m'en débarasser : rien à faire...

D'autre part, j'aurais une autre question : actuellement le sous-menu reste déroulé tant que je ne clique pas sur un des liens ou ailleurs dans la page. Comment faire pour qu'il se referme dès que je ne le survole plus ? Si c'est possible bien sûr...

Merci d'avance pour vos lumières éclairées !!!!

Sandra

Salut,

Tu pourrais commencer par éviter de redimensionner les éléments de sous-menu lors de leur survol :

#navigation div a:hover, #navigation div a:focus{
    [...]
    height: 70px;

Bonjour, et merci de la réponse

Ben justement je "veux" que les

div a

prennent 70 au survol, mais pas les

li a

...

Je l'ai trituré dans tous les sens...

Si quelqu'un a l'astuce, je prends !

Merci d'avance

Sandra