Bonjour,
Je souhaite réaliser pour mon site un menu où des sous-listes apparaitraient au passage du curseur sur un item de la liste (comme ici).

J'ai fais mon design de base, puis n'arrivant pas faire l'effet voulu j'ai tenté de trouver des script déjà fait et dispo sur le net. J'ai été voir beaucoup de tuto, tous très différents, mais aucun ne fonctionnait comme je le souhaitait. J'ai donc pris ce que je voulais sur chaque tuto et j'ai fais une sorte de "pot-pourri". Mais voilà, ça ne fonctionne toujours pas

Pourriez vous m'aider ? Voilà mon code :

<!-- pour éviter le clignotement désagréable -->
<div id="menu_gauche">
	<script language="Javascript" type="text/javascript">
		preChargement();
	</script>
	
    <h3>Ressources :</h3>
	
	<div id="menu1" class="menu" onmouseover="MontrerMenu('ssmenu1');" onmouseout="CacherDelai();">
			<a href="site_index.php" onfocus="MontrerMenu('ssmenu1');">Accueil<span> :</span></a> <!-- Le lien à afficher de base -->
    </div>
	
	<div id="menu2" class="menu" onmouseover="MontrerMenu('ssmenu2');" onmouseout="CacherDelai();">
        <a href="site_media.php" onfocus="MontrerMenu('ssmenu1');">M&#233;dias<span> :</span></a> <!-- Le lien à afficher de base -->
    </div>
		<ul id="ssmenu2" class="ssmenu" onmouseover="AnnulerCacher();" onmouseout="CacherDelai();" onfocus="AnnulerCacher();" onblur="CacherDelai();">
			<li>
				<a href="site_screenshot.php">Screenshots<span> ;</span></a> <!-- Les sous-menu ... -->
			</li>
			<li>
				<a href="site_carte.php">Carte d'An&#235;dor<span> ;</span></a> <!-- ... qu'il faut cacher au départ -->
			</li>
		</ul>
	
	<div id="menu3" class="menu" onmouseover="MontrerMenu('ssmenu3');" onmouseout="CacherDelai();">
        <a href="site_aide_jeu.php" onfocus="MontrerMenu('ssmenu1');">Aides de Jeu<span> :</span></a> <!-- Le lien à afficher de base -->
    </div>
		<ul id="ssmenu3" class="ssmenu" onmouseover="AnnulerCacher();" onmouseout="CacherDelai();" onfocus="AnnulerCacher();" onblur="CacherDelai();">
			<li>
				<a href="site_guide.php">Guide du Joueur<span> ;</span></a> <!-- Les sous-menu ... -->
			</li>
			<li>
				<a href="site_bdd.php">Base de Donn&#233;e<span> ;</span></a> <!-- ... qu'il faut cacher au départ -->
			</li>
		</ul>
	
	<div id="menu4" class="menu" onmouseover="MontrerMenu('ssmenu4');" onmouseout="CacherDelai();">
        <a href="site_communaute.php" onfocus="MontrerMenu('ssmenu1');">Communaut&#233;<span> :</span></a> <!-- Le lien à afficher de base -->
    </div>
		<ul id="ssmenu4" class="ssmenu" onmouseover="AnnulerCacher();" onmouseout="CacherDelai();" onfocus="AnnulerCacher();" onblur="CacherDelai();">
			<li>
				<a href="C:\wamp\www\Anedor\forum\forum_index.php">Forum<span> ;</span></a> <!-- Les sous-menu ... -->
			</li>
			<li>
				<a href="site_fan.php">Sites de Fans<span> ;</span></a> <!-- ... qu'il faut cacher au départ -->
			</li>
		</ul>
	
	<div id="menu5" class="menu" onmouseover="MontrerMenu('ssmenu5');" onmouseout="CacherDelai();">
        <a href="site_plus.php" onfocus="MontrerMenu('ssmenu1');">Plus<span> :</span></a> <!-- Le lien à afficher de base -->
    </div>
		<ul id="ssmenu5" class="ssmenu" onmouseover="AnnulerCacher();" onmouseout="CacherDelai();" onfocus="AnnulerCacher();" onblur="CacherDelai();">
			<li>
				<a href="site_team">La Team "Orenad Games"<span> ;</span></a> <!-- Les sous-menu ... -->
			</li>
			<li>
				<a href="site_contact">Nous Contacter<span> ;</span></a> <!-- ... qu'il faut cacher ... -->
			</li>
			<li>
				<a href="javascript:addFav();">Ajouter aux favoris<span>.</span></a> <!-- ... au départ -->
			</li>
		</ul>
		
</div>
	
	<script language="Javascript" type="text/javascript">
		Chargement();
	</script>

/* Le menu de Gauche (Parce que y'a un menu à droite aussi, qui lui ne sera pas déroulant) */

#menu_gauche /* Style général */
{
   float: left;
   width: 17%;
   margin-left: 2%;
   list-style-type: none;
   
   background-color: #e0ef7c;
   
   border: 2px solid black;
   
   margin-bottom: 20px;
}

#menu1, #menu2, #menu3, #menu4, #menu5 /* Style appliqué seulement à ce qui apparait de base */
{
   background-color: #e0ef7c;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
   
   border: 2px solid black;
   
   border-bottom: none; /* Pour éviter ... */
   border-left: none;   /* ... les chevauchements ... */
   border-right:none;   /* ... de bordures */
   
   text-align: center;
   
   padding-bottom: 1%;
   padding-top: 1%;
}

#menu_gauche h3
{    
   color: #000000;
   font-family: Papyrus, Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;
   
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
}

#menu_gauche span /* Cache les ; et : aux yeux de tous mais permet aux handicapés utilisant une méthode vocale de mieux comprendre : 
ça produit une pause dans la lecture */
{
   display: none;
}

#menu_gauche ul /* Style appliqué aux éléments que je veux faire apparaître de base */
{
   list-style-type: none;
   padding: 0px;
   padding-left: 20px;
   padding-bottom: 10px;
   margin: 0px;
   margin-bottom: 5px;
}

#menu_gauche ul li /* Sous-listes */
{ 
        position: absolute; /* Position absolue */
        width: 144px; /* Largeur des sous-listes */
        left: -999em; /* Hop, on envoie loin du champ de vision */
}

#menu_gauche a /* Tous les liens du menu */
{
   color: #000000;
   text-decoration: none;
   font-family: Papyrus, Arial, "Arial Black", "Times New Roman", Times, serif;
   display: block;
}

#menu_gauche a:hover /* Petite déco */
{
   text-decoration: underline;
}

#menu ul:hover li, #menu ul.sfhover li /* Sous-listes lorsque la souris passe sur un élément de liste */
{
        left: auto; /* Repositionnement normal */
        min-height: 0; /* Corrige un bug sous IE */
}

/* true = le menu sera vertical, à gauche.
   false = le menu sera horizontal, en haut. */
var vertical = true;

/* TRES IMPORTANT !
   Il faut mettre ici le nombre de menus, le script n'est pas capable de compter tout
   seul ! :-p Donc si votre code va jusqu'à <p id="menu5"...> il faut mettre 5. */
var nbmenu = 5;



/* Centrer le menu ? (true/false).
   Centre horizontalement ou verticalement suivant le mode choisi. */
var centrer_menu = true;

/* On est obligé de définir une largeur pour les menus. */
var largeur_menu = 85;

/* En mode vertical, on a besoin de connaître la hauteur de chaque menu.
   Même si les "cases" ne sont pas dimensionnées en hauteur.
   Ajustez cette variable si les menus sont trop rapprochés ou espacés en vertical. */
var hauteur_menu = 25;


/* ... pour mettre un peu d'espace entre les menus ! */
var espace_entre_menus = 5;


/* position du menu par rapport au haut de l'écran ou de la page.
   0 = le menu est tout en haut. en px */
var top_menu = 2;

/* Position gauche du menu, en px. */
var left_menu = 0;
/* En version verticale.
   Position des sous-menus par rapport au bord gauche de l'écran. */
var left_ssmenu = largeur_menu+2;


/* Quand la souris quitte un sous-menu, si le sous-menu disparait immédiatement,
   cela gêne l'utilisateur. Alors on peut mettre un délai avant disparition du sous-menu.
   500 ms c'est bien :-) */
var delai = 650; // en milliseconde

/* En version verticale.
   On décale le document à droite pour pas que le menu le superpose. */
var marge_a_gauche_de_la_page = largeur_menu + 10;


/* Mettez à true si vous souhaitez que le menu soit toujours visible.
   Mettez false si vous ne le souhaitez pas, dans ce cas le menu "disparaîtra" quand vous
   descendrez dans la page. */
var suivre_le_scroll=false;

/* On fait dérouler les sous-menu au passage du curseur */
sfHover = function() {
        var sfEls = document.getElementById("menu_gauche").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
                sfEls[i].onmouseover=function() {
                        this.className+=" sfhover";
                }
                sfEls[i].onmouseout=function() {
                        this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                }
        }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

C'est un peu gros, mais j'ai essayé de commenter un maximum pour vous faciliter la tâche ...
Merci d'avance à ceux qui répondront

Pourquoi tu utilises du javascript ?

Alors que comme le lien que tu donnes, le fais très bien avec que du CSS.

De même pour les menus de ce site :
http://cssplay.co.uk/

Je conseil aussi l'utilisation de CSS. Javascript va te compliquer la tache ici.

Analyse la page que tu as donné en exemple pour réaliser l'effet souhaité !

bonsoir mon ami juste un conseil amical essayez au plus d'éviter le js dans vos applications web car si l'internaute n'utilise pas js alors vous risquez des graux problème essentiellement dans les taches importantes comme login ou poster un message ici dans votre cas si le js est désactiver alors vous risquez un problème d'apparence et c'est pas jolie

Je plussoie darkangel, il ne faut en aucun cas que le js soit nécessaire pour parcourir le site. Il faut toujours que ton site fonctionne sans, et ensuite tu rajoutes une couche de js qui va modifier le site pour ceux qui ont js mais de manière à ce qu'il soit toujours accessible pour ce qui le désactivent.
Pense à mettre le sujet en résolu .

Je suis d'accord, la meilleure solution est d'utilisé le css, mais faudrait que mr le navigateur le plus utilisé et le plus sécurisé (d'après la publicité tv) accepte l'attribut hover!!!
Désolé pour ce troll.