Probleme menu deroulant

Résolu
gyom -  
Bonjour,

debutant en css/jvascript, je souhaite creer un menu deroulant vertical a partir de ce code (trouvé sur un blog sympa) :

<ul id="menuDeroulant1">
<li><a href="http://liencategorie1.html">Catégorie1</a>
<ul class="sousMenu1">
<li><a href="http://liensousmenu1-cat1.html">Lien 1 de la catégorie 1</a> </li>
<li><a href="http://liensousmenu2-cat1.html">Lien 2 de la catégorie 1</a> </li>
<li><a href="http://liensousmenu3-cat1.html">Lien 3 de la catégorie 1</a> </li>
</ul>
</li>
</ul>
<br /><br />
<ul id="menuDeroulant2">
<li><a href="http://liencategorie2.html">Catégorie2</a>
<ul class="sousMenu2">
<li><a href="http://liensousmenu1-cat2.html">Lien 1 de la catégorie 2</a> </li>
<li><a href="http://liensousmenu2-cat2.html">Lien 2 de la catégorie 2</a> </li>
<li><a href="http://liensousmenu3-cat2.html">Lien 3 de la catégorie 2</a> </li>
</ul>
</li>
</ul>
<br /><br />
<ul id="menuDeroulant3">
<li><a href="http://liencategorie3.html">Catégorie3</a>
<ul class="sousMenu3">
<li><a href="http://liensousmenu1-cat3.html">Lien 1 de la catégorie 3</a> </li>
<li><a href="http://liensousmenu2-cat3.html">Lien 2 de la catégorie 3</a> </li>
<li><a href="http://liensousmenu3-cat3.html">Lien 3 de la catégorie 3</a> </li>
</ul>
</li>
</ul>
<br /><br />
<ul id="menuDeroulant4">
<li><a href="http://liencategorie4.html">Catégorie4</a>
<ul class="sousMenu4">
<li><a href="http://liensousmenu1-cat4.html">Lien 1 de la catégorie 4</a> </li>
<li><a href="http://liensousmenu2-cat4.html">Lien 2 de la catégorie 4</a> </li>
<li><a href="http://liensousmenu3-cat4.html">Lien 3 de la catégorie 4</a> </li>
</ul>
</li>
</ul>

Bon a l'aperçu dans le navigateur le menu parait sympa, exactement le truc que je recherche, par contre (dsl c'est surement tout con), ce que je comprend pas c'est que la categorie 2, 3, et 4 ne figurent pas dans mon menu deroulant, pourquoi???
merci d'avance

Gyom

17 réponses

  1.  Breub62
    Je ne comprends pas vraiment ta question, ni ton problème...
    0
    1. gyom
      ba tu as vu ce que ça donne le code en question, y a categorie 1 avec les 3 sous categories, ba moi ce que je cherches a voir afficher, c'est categorie 2 avec les 3 sous categories, categorie 3 avec les 3 sous categories...en gros que mon menu ait plusieurs branches principales
      0
      1. Breub62
        C'est exactement ce que ce code fait si je ne m'abuse?
        0
        1. gyom
          regardes ce que ça me donnes ici : http://guibeuzz.free.fr/2.jpg

          moi jvois pas :

          categorie2
          categorie3
          categorie4

          alors que ça figure dans le code
          0
          2. Breub62
            En testant ce code ça m'affiche tout correctement, tant il est simple. Je n'ai cependant pas ton css, il y a peut-être display=none pour menuderoulant2, 3 et 4...
            0
            1. gyom
              tiens je te passe le css :

              <style type="text/css"><!--
              #menuDeroulant1{ width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0;}

              #menuDeroulant1 li{ float: left; margin: 0px; padding: 0; border: 0;}

              #menuDeroulant1 li:hover > .sousMenu1 { display: block; }

              #menuDeroulant1 .sousMenu1{ list-style-type: none; margin: 0; padding: 0; border: 0;}
              #menuDeroulant1 .sousMenu1{ display: none; list-style-type: none; margin: 0; padding: 0; border: 0;}

              #menuDeroulant1 .sousMenu1 li{ float: none; margin: 0; padding: 0; border: 0;}

              #menuDeroulant1 li{ float: left; width: 200px; margin: 0; padding: 0; border: 0; font-size:11px;}

              #menuDeroulant1{ width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0; position: absolute; top: 100; z-index:1000;}

              #menuDeroulant1 li a:link, #menuDeroulant1 li a:visited{ display: block; height: 1%; color: #FFFFFF; background: #3B4E77; margin: 0; padding: 4px 8px; border-bottom: 1px solid #FFFFFF; text-decoration: none;}
              #menuDeroulant1 li a:hover { background-color: #99CCFF; }
              #menuDeroulant1 li a:active { background-color: #FF3300; }
              #menuDeroulant1 .sousMenu1 li a:link,#menuDeroulant1 .sousMenu1 li a:visited{ display: block; color: #FFFFFF; margin: 0; border: 0; text-decoration: none; background-color:#CCCCCC;}
              #menuDeroulant1 .sousMenu1 li a:hover{ background-image: none; background-color: #FF3300;}
              --></style>

              <style type="text/css"><!--
              #menuDeroulant2{ width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0;}

              #menuDeroulant2 li{ float: left; margin: 0; padding: 0; border: 0;}

              #menuDeroulant2 li:hover > .sousMenu2 { display: block; }

              #menuDeroulant2 .sousMenu2{ list-style-type: none; margin: 0; padding: 0; border: 0;}
              #menuDeroulant2 .sousMenu2{ display: none; list-style-type: none; margin: 0; padding: 0; border: 0;}

              #menuDeroulant2 .sousMenu2 li{ float: none; margin: 0; padding: 0; border: 0;}

              #menuDeroulant2 li{ float: left; width: 200px; margin: 0; padding: 0; border: 0; font-size:11px;}

              #menuDeroulant2{ width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0;position: absolute; top: 100;z-index:999;}

              #menuDeroulant2 li a:link, #menuDeroulant2 li a:visited{ display: block; height: 1%; color: #FFFFFF; background: #3B4E77; margin: 0; padding: 4px 8px; border-bottom: 1px solid #FFFFFF; text-decoration: none;}
              #menuDeroulant2 li a:hover { background-color: #99CCFF; }
              #menuDeroulant2 li a:active { background-color: #FF3300; }
              #menuDeroulant2 .sousMenu2 li a:link,#menuDeroulant2 .sousMenu2 li a:visited{ display: block; color: #FFFFFF; margin: 0; border: 0; text-decoration: none; background-color:#CCCCCC;}
              #menuDeroulant2 .sousMenu2 li a:hover{ background-image: none; background-color: #FF3300;}
              --></style>

              <style type="text/css"><!--
              #menuDeroulant3{ width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0;position: absolute; top: 100;z-index:998;}

              #menuDeroulant3 li{ float: left; margin: 0px; padding: 0; border: 0;}

              #menuDeroulant3 li:hover > .sousMenu3 { display: block; }

              #menuDeroulant3 .sousMenu3{ list-style-type: none; margin: 0; padding: 0; border: 0;}
              #menuDeroulant3 .sousMenu3{ display: none; list-style-type: none; margin: 0; padding: 0; border: 0;}

              #menuDeroulant3 .sousMenu3 li{ float: none; margin: 0; padding: 0; border: 0;}

              #menuDeroulant3 li{ float: left; width: 200px; margin: 0; padding: 0; border: 0; font-size:11px;}

              #menuDeroulant3{ width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0; }

              #menuDeroulant3 li a:link, #menuDeroulant3 li a:visited{ display: block; height: 1%; color: #FFFFFF; background: #3B4E77; margin: 0; padding: 4px 8px; border-bottom: 1px solid #FFFFFF; text-decoration: none;}
              #menuDeroulant3 li a:hover { background-color: #99CCFF; }
              #menuDeroulant3 li a:active { background-color: #FF3300; }
              #menuDeroulant3 .sousMenu3 li a:link,#menuDeroulant3 .sousMenu3 li a:visited{ display: block; color: #FFFFFF; margin: 0; border: 0; text-decoration: none; background-color:#CCCCCC;}
              #menuDeroulant3 .sousMenu3 li a:hover{ background-image: none; background-color: #FF3300;}
              --></style>

              <style type="text/css"><!--
              #menuDeroulant4{ width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0;}

              #menuDeroulant4 li{ float: left; margin: 0px; padding: 0; border: 0;}

              #menuDeroulant4 li:hover > .sousMenu4 { display: block; }

              #menuDeroulant4 .sousMenu4{ list-style-type: none; margin: 0; padding: 0; border: 0;}
              #menuDeroulant4 .sousMenu4{ display: none; list-style-type: none; margin: 0; padding: 0; border: 0;}

              #menuDeroulant4 .sousMenu4 li{ float: none; margin: 0; padding: 0; border: 0;}

              #menuDeroulant4 li{ float: left; width: 200px; margin: 0; padding: 0; border: 0; font-size:11px;}

              #menuDeroulant4{ width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0; position: absolute; top: 100;z-index:997;}

              #menuDeroulant4 li a:link, #menuDeroulant4 li a:visited{ display: block; height: 1%; color: #FFFFFF; background: #3B4E77; margin: 0; padding: 4px 8px; border-bottom: 1px solid #FFFFFF; text-decoration: none;}
              #menuDeroulant4 li a:hover { background-color: #99CCFF; }
              #menuDeroulant4 li a:active { background-color: #FF3300; }
              #menuDeroulant4 .sousMenu4 li a:link,#menuDeroulant1 .sousMenu4 li a:visited{ display: block; color: #FFFFFF; margin: 0; border: 0; text-decoration: none; background-color:#CCCCCC;}
              #menuDeroulant4 .sousMenu4 li a:hover{ background-image: none; background-color: #FF3300;}
              --></style>
              0
              1. Breub62
                C'est toi qui as tout mis en commentaires?
                0
              2. Breub62
                Quand je décommente, j'ai tout comme il faut...
                http://www.cijoint.fr/cj201007/cijGQHC1VC.jpg
                0
            3. gyom
              tu veux dire tu remplaces tout par un autre texte (dans le 1er code et le css) et ça marche??? bon je vais essayer pour voir, merci a toi en tout cas
              0
              1. Breub62
                Oui tout marche, la seule chose que j'ai faite c'est décommenter ton css...
                0
            4. gyom
              desolé d'etre aussi boulet mais qu'est ce que tu appelles decommenter le css???
              0
              1. Breub62
                Quand tu as ceci : 
                <style type="text/css"><!--  
... 

--></style>

                Pour que ton css soit pris en compte, tu dois enlever <!-- et -->
                0
            5. gyom
              ok dac merci de m'avoir eclairer, vraiment cool de ta part, @ +
              0
              1. Breub62
                De rien ;-)
                Tout fonctionne?
                0
              2. gyom
                pas encore essayé mais ça me semble logique, donc ça devrait marcher, merci!
                0
            6. gyom
              alors jcapte pas jai bien enlevé les <!-- et --> jai toujours qu'une categorie...la vraiment je vois pas...
              0
              1. Breub62
                Je suppose que tu as autre chose dans ta page?

                Teste :
                <html>
<head />
<body>

<style type="text/css">
#menuDeroulant1{ width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant1 li{ float: left; margin: 0px; padding: 0; border: 0;}

#menuDeroulant1 li:hover > .sousMenu1 { display: block; }

#menuDeroulant1 .sousMenu1{ list-style-type: none; margin: 0; padding: 0; border: 0;}
#menuDeroulant1 .sousMenu1{ display: none; list-style-type: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant1 .sousMenu1 li{ float: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant1 li{ float: left; width: 200px; margin: 0; padding: 0; border: 0; font-size:11px;}

#menuDeroulant1{ width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0; position: absolute; top: 100; z-index:1000;}

#menuDeroulant1 li a:link, #menuDeroulant1 li a:visited{ display: block; height: 1%; color: #FFFFFF; background: #3B4E77; margin: 0; padding: 4px 8px; border-bottom: 1px solid #FFFFFF; text-decoration: none;}
#menuDeroulant1 li a:hover { background-color: #99CCFF; }
#menuDeroulant1 li a:active { background-color: #FF3300; }
#menuDeroulant1 .sousMenu1 li a:link,#menuDeroulant1 .sousMenu1 li a:visited{ display: block; color: #FFFFFF; margin: 0; border: 0; text-decoration: none; background-color:#CCCCCC;}
#menuDeroulant1 .sousMenu1 li a:hover{ background-image: none; background-color: #FF3300;}

#menuDeroulant2{ width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant2 li{ float: left; margin: 0; padding: 0; border: 0;}

#menuDeroulant2 li:hover > .sousMenu2 { display: block; }

#menuDeroulant2 .sousMenu2{ list-style-type: none; margin: 0; padding: 0; border: 0;}
#menuDeroulant2 .sousMenu2{ display: none; list-style-type: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant2 .sousMenu2 li{ float: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant2 li{ float: left; width: 200px; margin: 0; padding: 0; border: 0; font-size:11px;}

#menuDeroulant2{ width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0;position: absolute; top: 100;z-index:999;}

#menuDeroulant2 li a:link, #menuDeroulant2 li a:visited{ display: block; height: 1%; color: #FFFFFF; background: #3B4E77; margin: 0; padding: 4px 8px; border-bottom: 1px solid #FFFFFF; text-decoration: none;}
#menuDeroulant2 li a:hover { background-color: #99CCFF; }
#menuDeroulant2 li a:active { background-color: #FF3300; }
#menuDeroulant2 .sousMenu2 li a:link,#menuDeroulant2 .sousMenu2 li a:visited{ display: block; color: #FFFFFF; margin: 0; border: 0; text-decoration: none; background-color:#CCCCCC;}
#menuDeroulant2 .sousMenu2 li a:hover{ background-image: none; background-color: #FF3300;}

#menuDeroulant3{ width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0;position: absolute; top: 100;z-index:998;}

#menuDeroulant3 li{ float: left; margin: 0px; padding: 0; border: 0;}

#menuDeroulant3 li:hover > .sousMenu3 { display: block; }

#menuDeroulant3 .sousMenu3{ list-style-type: none; margin: 0; padding: 0; border: 0;}
#menuDeroulant3 .sousMenu3{ display: none; list-style-type: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant3 .sousMenu3 li{ float: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant3 li{ float: left; width: 200px; margin: 0; padding: 0; border: 0; font-size:11px;}

#menuDeroulant3{ width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0; }

#menuDeroulant3 li a:link, #menuDeroulant3 li a:visited{ display: block; height: 1%; color: #FFFFFF; background: #3B4E77; margin: 0; padding: 4px 8px; border-bottom: 1px solid #FFFFFF; text-decoration: none;}
#menuDeroulant3 li a:hover { background-color: #99CCFF; }
#menuDeroulant3 li a:active { background-color: #FF3300; }
#menuDeroulant3 .sousMenu3 li a:link,#menuDeroulant3 .sousMenu3 li a:visited{ display: block; color: #FFFFFF; margin: 0; border: 0; text-decoration: none; background-color:#CCCCCC;}
#menuDeroulant3 .sousMenu3 li a:hover{ background-image: none; background-color: #FF3300;}

#menuDeroulant4{ width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant4 li{ float: left; margin: 0px; padding: 0; border: 0;}

#menuDeroulant4 li:hover > .sousMenu4 { display: block; }

#menuDeroulant4 .sousMenu4{ list-style-type: none; margin: 0; padding: 0; border: 0;}
#menuDeroulant4 .sousMenu4{ display: none; list-style-type: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant4 .sousMenu4 li{ float: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant4 li{ float: left; width: 200px; margin: 0; padding: 0; border: 0; font-size:11px;}

#menuDeroulant4{ width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0; position: absolute; top: 100;z-index:997;}

#menuDeroulant4 li a:link, #menuDeroulant4 li a:visited{ display: block; height: 1%; color: #FFFFFF; background: #3B4E77; margin: 0; padding: 4px 8px; border-bottom: 1px solid #FFFFFF; text-decoration: none;}
#menuDeroulant4 li a:hover { background-color: #99CCFF; }
#menuDeroulant4 li a:active { background-color: #FF3300; }
#menuDeroulant4 .sousMenu4 li a:link,#menuDeroulant1 .sousMenu4 li a:visited{ display: block; color: #FFFFFF; margin: 0; border: 0; text-decoration: none; background-color:#CCCCCC;}
#menuDeroulant4 .sousMenu4 li a:hover{ background-image: none; background-color: #FF3300;}
</style>




<ul id="menuDeroulant1">
<li><a href="http://liencategorie1.html">Catégorie1</a>
<ul class="sousMenu1">
<li><a href="http://liensousmenu1-cat1.html">Lien 1 de la catégorie 1</a> </li>
<li><a href="http://liensousmenu2-cat1.html">Lien 2 de la catégorie 1</a> </li>
<li><a href="http://liensousmenu3-cat1.html">Lien 3 de la catégorie 1</a> </li>
</ul>
</li>
</ul>
<br /><br />
<ul id="menuDeroulant2">
<li><a href="http://liencategorie2.html">Catégorie2</a>
<ul class="sousMenu2">
<li><a href="http://liensousmenu1-cat2.html">Lien 1 de la catégorie 2</a> </li>
<li><a href="http://liensousmenu2-cat2.html">Lien 2 de la catégorie 2</a> </li>
<li><a href="http://liensousmenu3-cat2.html">Lien 3 de la catégorie 2</a> </li>
</ul>
</li>
</ul>
<br /><br />
<ul id="menuDeroulant3">
<li><a href="http://liencategorie3.html">Catégorie3</a>
<ul class="sousMenu3">
<li><a href="http://liensousmenu1-cat3.html">Lien 1 de la catégorie 3</a> </li>
<li><a href="http://liensousmenu2-cat3.html">Lien 2 de la catégorie 3</a> </li>
<li><a href="http://liensousmenu3-cat3.html">Lien 3 de la catégorie 3</a> </li>
</ul>
</li>
</ul>
<br /><br />
<ul id="menuDeroulant4">
<li><a href="http://liencategorie4.html">Catégorie4</a>
<ul class="sousMenu4">
<li><a href="http://liensousmenu1-cat4.html">Lien 1 de la catégorie 4</a> </li>
<li><a href="http://liensousmenu2-cat4.html">Lien 2 de la catégorie 4</a> </li>
<li><a href="http://liensousmenu3-cat4.html">Lien 3 de la catégorie 4</a> </li>
</ul>
</li>
</ul> 

</body>
</html>
                0
            7. gyom
              jai copié collé ton code en source dans NVU, puis aperçu dans le navigateur, et toujours rien, je desespere...
              0
              1. Breub62
                Rien du tout? Ou toujours que le 1er?

                Sur Notepad ça marche nickel...
                Tu l'as bien testé sur une page vierge?
                0
            8. gyom
              ouai ouai et la je viens de le retester dans notepad et ça m'ouvre toujours qu'une categorie...jvais lacher l'affaire pour ce script, en fait je cherche a trouver un script pas trop complexe pour un menu deroulant vertical, si tas des bons plans n'hesites pas....
              0
              1. Breub62
                Rectificatif... Quand j'inclue ce code dans une page déjà existante, ça m'affiche tout correctement. Mais si je laisse tout sur une page vierge j'ai le même soucis que toi... Je ne comprends pas trop. Je continue de regarder...
                0
                1. Breub62
                  Précision, il semblerait que tous les sous-menus soient bien présents mais ils se superposent les uns sur les autres...
                  0
                  1. Breub62
                    Problème résolu en mettant 
                    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
                    avant le <html>...
                    0
                    1. gyom
                      chapeau man!!!

                      bravo a toi et merci pour ces infos!!!

                      a+
                      0
                      1. Breub62
                        De rien.
                        Bonne continuation...
                        @+
                        0

                    Discussions similaires

                    accéder au menu caché
                    Kabos

                    1 réponse
                    Comment activer le Bluetooth sur une TV Samsung ?
                    zaraki490

                    110 réponses
                    Comment faire afin d'accéder au boot menu ou BIOS sous MSI ?
                    Kaheil

                    7 réponses
                    menu caché
                    laurent

                    7 réponses