Javascript : problème aevc onMouseOver

Bonjour,

Je fait encore une fois (ça devient franchement une habitude..) à ce site pour résoudre un problème.
..ou plutôt un casse-tête !

Mon problème est le suivant : Je cherche à créer un menu (en javascript). dans mon code, j'insère deux liens dans une même div. Ces deux liens affichent chacuns plusieurs liens à la manière d'un menu.

Quand la souris est dessus, les liens s'affichent, mais là ou réside mon problème, c'est que je souhaiterais que le liens n°2 qui affiche d'autre liens, cachent les liens qu'affiche le lien n°1 (vous suivez? ..je sais c'est un peu casse tête).

Voici donc mon code, j'ai beau ajouter la fonction hide à mon onMouseOver, pas moyen.. si quelqu'un peut m'aider..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title></title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="blabla" href="" />
	   	<script type="text/javascript">
		function show(id) {
			//on récupère l'élément qui a l'identifiant donné en paramètre
			var toShow = document.getElementById(id);
			//on change la valeur du style css en visible
			toShow.style.visibility = 'visible';
		}
		
		function hide(id) {
			//on récupère l'élément qui a l'identifiant donné en paramètre
			var toHide = document.getElementById(id);
			//on change la valeur du style css en visible
			toHide.style.visibility = 'hidden';
		}

	</script>
   </head>
	<body> <!--On regroupe les liens qui affichent leurs enfants respectifs au passage de la souris-->
	<div class="Link" id="">
		<a href="" alt="" class="" id="" onMouseOver="show('SkyrockDisplay');">Skyrock</a>
		<a href="" alt="" class="" id="" onMouseOver="show('HotmailDisplay');">Hotmail</a>


	</div>
	
	<!--On regroupe les différents groupes de liens qui s'affichent au passage de la souris sur leurs parents respectifs-->
	<div class="SkyrockCustomize" id="SkyrockDisplay" style="visibility: hidden;" onMouseOut="hide('SkyrockDisplay');" onMouseOver="show('SkyrockDisplay');">
		<a href="" alt="" class="" id="">Skyrock</a>
		<a href="" alt="" class="" id="">Skyrock</a>
		<a href="" alt="" class="" id="">Skyrock</a>
	</div>
	
	<div class="HotmailCustomize" id="HotmailDisplay" style="visibility: hidden;" onMouseOut="hide('HotmailDisplay');" onMouseOver="show('HotmailDisplay'); hide('SkyrockDisplay');">
		<a href="" alt="" class="" id="">Hotmail</a>
		<a href="" alt="" class="" id="">Hotmail</a>
	</div>
</body>
</html>

Voilà, j'espère que quelqu'un saura résoudre mon énigme.
Merci

Configuration: Windows XP
Firefox 3.0.4
XHTML 1.0 Strict