Menu Déroulant Portail

[Desolation]

Bonjour les ami(e)s,

Voila je rencontre actuellement un probleme, je souhaiterais mettre en place un menu déroulant ou l'on clique pour ouvrir le menu et non plus avec le passage de la sourie comme actuellement. Je suis allé sur le topic du menu déroulant et tester la technique seulement cela ne fonctionne pas.

Pour le voir aller ici => www.crazymocs.com

Voici mon JAVA :

Code:

$(function(){ $("#menu dl").hover(function(){$("#menu dl dd").slideUp("500");$(this).find("dd").stop(true,true).slideDown("500");},function(){$(this).find("dd").slideUp("500");}); });

Mon code dans le Overall_header :

Code:

        <!--Menu déroulant-->
<div id="menu">
<FONT size="2pt">
 <dl>
          <dt><span style="color: #F7F7F7;">Partie Publique</spam></dt>
         <dd style="display:none;">
 <ul>      
 <li>
 <a href="http://www.crazymocs.com/t73-qui-sommes-nous"><span style="color: #FF0000;">Crazy Mocs ?</span></a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/t1263-staff-crazy-mocs"><span style="color: #FF0000;">Staff CM</span></a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f11-presentations-obligatoire-pour-avoir-100-du-forum"><span style="color: #FF0000;">Présentations</spam></a>
 </li>
                   <li><center>------</center></li>
 <li>
 <a href="http://www.crazymocs.com/f12-coup-de-coeur">Coup de Coeur</a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f6-informations">Informations</a>
 </li>
<li>
 <a href="http://www.crazymocs.com/f15-la-vie-du-forum">Vie du Forum</a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f7-expositions-lego">Expositions</a>
 </li>
                   <li><center>-EXPO CM 2014-</center></li>
                        <li>
                          <a href="http://www.crazymocs.com/t2682-expo-les-3-et-4-mai-2014-a-mennecy-91"><span style="color: #C9720E;">Mennecy</spam></a>
 </li>    
 <li>
                          <a href="http://www.crazymocs.com/t2702-exposition-crazy-mocs"><span style="color: #C9720E;">SaintLager</spam></a>
 </li>        
                   <li><center>------</center></li>
 <li>
 <a href="http://www.crazymocs.com/f44-lego-magazine">LEGO® Magazine</a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f45-lego-store-france">LEGO® Store FR</a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f8-videos-lego">Videos LEGO®</a>
 </li>
 </ul>
                  </dd>
</dl>
 <dl>
 <dt><span style="color: #F7F7F7;">Partenaires</spam></dt>
 <dd style="display:none;">
 <ul>
 <li>
 <a href="http://www.crazymocs.com/f25-site-forum"><span style="color: #FF0000;">Informations</spam></a>
 </li>
                   <li><center>------</center></li>
 <li>
 <a href="http://www.crazymocs.com/t506-partenaires"><span style="color:;">Nos Partenaires</span></a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/t954-devenir-un-partenaire-du-crazy-mocs"><span style="color:;">Etre Partenaire?</span></a>
 </li>
 </ul>
                  </dd>
</dl>
 <dl>
 <dt><span style="color: #F7F7F7;">Partie Privée</spam></dt>
                  <dd style="display:none;">
 <ul>
 <li>
 <a href="http://www.crazymocs.com/f33-la-papotte-interne-et-flood-hors-sujet">Papote/Flood</a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f30-concours">Concours</a>
 </li>
 <li>
                           <a href="http://www.crazymocs.com/f31-sondages">Sondages</a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f3-collections">Collections</a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f34-identification-de-pieces-et-de-sets-lego">Identification</a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f1-faq-actif">FAQ Actif</a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f10-crazy-jeux">Crazy Jeux</a>
 </li>
 </ul>
                  </dd>
</dl>
<dl>
 <dt><span style="color: #F7F7F7;">Créations</spam></dt>
                  <dd style="display:none;">
 <ul>
 <li>
 <a href="http://www.crazymocs.com/f5-sets-officiels-lego">Set Officiels</a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f14-moc-classiques">Mocs Classiques</a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f46-moc-licences">Mocs Licences</a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f16-autres-mocs">Autres Mocs</a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f4-scenettes-lego">Scènettes</a>
 </li>
 </ul>
                  </dd>
</dl>
 <dl>
 <dt><span style="color: #F7F7F7;">C.A.D</spam></dt>
                  <dd style="display:none;">
 <ul>
 <li>
 <a href="http://www.crazymocs.com/f17-computer-aided-design">C.A.D</a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f50-moc-cad">Mocs C.A.D</a>
 </li>
 </ul>
                  </dd>
</dl>
 <dl>
 <dt><span style="color: #F7F7F7;">Instructions</spam></dt>
                  <dd style="display:none;">
 <ul>
 <li>
 <a href="http://www.crazymocs.com/f22-instructions-de-set-lego">Instructions Set</a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f23-instructions-des-mocs-crazy">Instructions CM</a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f24-astuces-d-assemblages">Astuces</a>
 </li>
 </ul>
                  </dd>
</dl>
 <dl>
 <dt><span style="color: #2299CC;">A/V/E</spam></dt>
                  <dd style="display:none;">
 <ul>
 <li>
 <a href="http://www.crazymocs.com/f13-minifigures-echanges-par-ici"><span style="color: ;">Minifigs</span></a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f18-achat-vente-echange">A/V/E</a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f37-feedback">Feedback</a>
 </li>
 </ul>  
                 </dd>
</dl>
 <dl>
 <dt><span style="color: #C9720E;">Association</spam></dt>
                  <dd style="display:none;">
 <ul>
 <li>
 <a href="http://www.crazymocs.com/t1149-cotisations-association-crazy-mocs"><span style="color:#C9720E;">Cotisations</span></a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/t1417-recepisse-de-l-association"><span style="color: #C9720E;">Récépissé</span></a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/t1258-reglement-interieur"><span style="color: #C9720E;">Règlement</span></a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/t1148-statuts-crazy-mocs-association"><span style="color: #C9720E;">Statuts</span></a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/t2578-hierarchie-crazy-mocs#28925"><span style="color: #C9720E;">Hiérarchie</span></a>
 </li>
                   <li><center>------</center></li>
 <li>
 <a href="http://www.crazymocs.com/f51-ambassade-lego">Ambassade</a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f26-discussion-generale">Discussion G</a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f41-sondage">Sondage</a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f27-assemblee-generale-et-comptes-rendus">Assemblée G</a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f28-lug-bulk">LUG Bulk</a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f29-expositions">Expositions</a>
 </li>
 </ul>
                 </dd>
</dl>
 <dl>
                  <dt><span style="color: #F7F7F7;">FAQ - TUTO !!!!</spam></dt>
                  <dd style="display:none;">
 <ul>
 <li>
 <a href="http://www.crazymocs.com/f20-faq-tuto-besoin-d-aide">Rubrique Général</a>
 </li>
                  <li><center>--FAQ--</center></li>
 <li>
 <a href="http://www.crazymocs.com/t19-lexique-des-termes-et-abreviations-utilises-par-les-fols"><span style="color: Navy;">Lexique LEGO®</span></a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/t400-lavage-de-lego"><span style="color: Navy;">Lavage LEGO®</span></a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/t24-bricklink-comment-acheter"><span style="color: Navy;">Bricklink Astuce</span></a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/t2054-palette-des-couleurs-de-nos-briques"><span style="color: Navy;">Couleurs Brick</span></a>
 </li>
 <li><center>--FORUM--</center></li>
<li>
 <a href="http://www.crazymocs.com/t231-rangs-du-forum"><span style="color: DarkGreen;">Rangs du Forum</span></a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/t188-explication-boutons-du-forum"><span style="color: DarkGreen;">Bouton Forum</span></a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/t1872-medailles-d-honneurs"><span style="color: DarkGreen;">Médailles d'Honneurs</span></a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/t2103-guide-du-crazy-j-aime"><span style="color: DarkGreen;">Crazy J'aime</span></a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/t303-couleurs-des-categories-et-forums-crazy-mocs#3216"><span style="color: DarkGreen;">Catégories Forum</span></a>
 </li>
                  <li><center>--AIDE--</center></li>
 <li>
 <a href="http://www.crazymocs.com/t332-aide-mettre-une-image-sur-le-forum"><span style="color: DarkRed;">Mettre une Image</span></a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/t93-aide-mettre-une-video-sur-le-forum"><span style="color: DarkRed;">Mettre une Vidéo</span></a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/t760-aide-mettre-une-signature-ou-un-avatar-sur-le-forum"><span style="color: DarkRed;">Avatar/Signature</span></a>
 </li>
 </ul>
                  </dd>
 </dl>
 </FONT>
                                      </div>

Mon CSS :

Code:

/*Menu V2 Déroulant (Portail)*/
        /*liste des menus*/
        #menu ul{padding: 0px;
            list-style-type: none;
        margin: 0px;
        }
        #menu{
            margin-top:-8px
        }
        /*positionnement des menus*/
        #menu dl {
            float: left;
            width: 120px;}
        
       /*menus*/
        #menu dt {
            color: blue;
            text-align: center;
            cursor: pointer;
            font-weight: bold;
            background: #575757;
            border: 1px solid black;
            margin: 0px;}
        
       /*menus au survol*/
        #menu dt:hover{
            border-bottom: none!important;
    background: #e6cf00;
    color: #000000!important;}
        
       /*liste des sous-menus*/
        #menu dd {
            display: none;
            border: 1px solid black;
            border-top: none!important;
            background: #575757;
            margin: 0px;
            padding: 0px;
            list-style-type: none;}
        
       #menu li {
            text-align: center;
            background: grey;
            margin: 0px;
            padding: 0px;
            list-style-type: none;}
        
       /* liens des sous-menus*/
        #menu li a, #menu dt a {
            color: black;
            background: #ccc;
            text-decoration: none;
            display: block;
            height: 100%;
            border: 0 none;
            margin: 0px;
            padding: 0px;
            list-style-type: none;}
        
       /*liens des sous-menus au survol*/
        #menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
            color: black;
            text-align: center;
            width: 118px;
            cursor: pointer;
            font-weight: bold;
            background: #e6cf00;
            margin: 0px;
            padding: 0px;
            list-style-type: none;}

Merci d'avance pour votre aide.
Desolation.

[Self]

Bonjour,

Essayez en remplaçant votre javascript par celui-ci :

Code:

$(function(){
    $("#menu dl").each(function(){
      $(this).click(function(){
          $(this).find('dd').slideToggle();
      });
    });
});

Cordialement .

[Desolation]

Merci pour ton aide, cela fonctionne a merveille ;)HOAH.