Problème de sous-menu

Bonjour,

Je débute gentiment en javascript et je me heurte à un petit problème concernant la disparition d'une sorte de sous menu. Comme un petit dessin vaut souvent mieux que plein d'explications, j'ai fait vite fait un shema de ce que je souhaite produire.

En rouge, c'est un logo, pas important.
En jaune mon menu, constitué uniquement de liens directs, sauf pour le "Menu04" qui doit afficher le sous menu.
En bleu le sous menu, constitué de deux "ul" dans un "div". (pas trouvé comment faire deux colonnes ayant cet aspect avec une seule liste)



Mon but est simple, quand on passe sur le "menu04", le sous-menu s'affiche et on peu naviguer dans celui-ci. Dès que le curseur quitte la zone, le sous menu disparait. Ca, ça marche, mon problème est de faire disparaitre le sous-menu si le curseur n'entre pas dedans...

Voici le code HTML du menu

<ul id="menu">
	<li><a href="#">Menu01</a></li>
	<li><a href="#">Menu02</a></li>
	<li><a href="#">Menu03</a></li>
	<li>
		<a href="#" class="lienMenu">Menu04</a>
		
		<div id="sousMenu">
			<ul>
				<li><a href="#">SousMenu01</a></li>
				<li><a href="#">SousMenu02</a></li>
				<li><a href="#">SousMenu03</a></li>
				<li><a href="#">SousMenu04</a></li>
				<li><a href="#">SousMenu05</a></li>
				<li><a href="#">SousMenu06</a></li>
				<li><a href="#">SousMenu07</a></li>
				<li><a href="#">SousMenu08</a></li>
				<li><a href="#">SousMenu09</a></li>
				<li><a href="#">SousMenu10</a></li>
				<li><a href="#">SousMenu11</a></li>
				<li><a href="#">SousMenu12</a></li>
			</ul>
			<ul>
				<li><a href="#">SousMenu13</a></li>
				<li><a href="#">SousMenu14</a></li>
				<li><a href="#">SousMenu15</a></li>
				<li><a href="#">SousMenu16</a></li>
			</ul>
		</div> <!-- FIN "sousMenu" -->

	</li>
	<li><a href="#">Menu05</a></li>
	<li><a href="#">Menu06</a></li>
</ul>

Le code JAVASCRIPT (j'utilise jQuery)

$(document).ready(function() {
	
	$('a.lienMenu').hover(
		function(){
			$('#sousMenu').fadeIn();
		},
		function(){
		
			$('#sousMenu').hover(
				function(){
					$('a.lienMenu').addClass('menuSelected');	// class pour conserver l'aspect "hover" du menu
				},function(){
					$('a.lienMenu').removeClass('menuSelected');
					$('#sousMenu').fadeOut();
				}
			);

 			// $('#sousMenu').fadeOut();     <- mon problème
		}
	);
	
	
});

Actuellement, le sous-menu apparait bien, on peut aller dessus et il disparait quand on en sort. Mais si je passe sur le menu04 (le sous-menu apparait) et que je poursuis ma route en bas, en haut ou a droite, il ne disparait pas. (normal avec le code actuel ceci-dit).

Ma question, comment gérer ça simplement? Hesitez pas à demander des précisions, je ne suis en général pas clair quand j'explique un truc

Merci d'avance pour votre aide précieuse^^
Modifié par NikoSan (03 Feb 2010 - 16:47)