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

Résumé de la discussion

Problème rencontré lors de la tentative de reproduction d'un menu déroulant vertical : les catégories 2 à 4 n'apparaissent pas, alors que le code présente quatre blocs menuDeroulant avec des sous-menus. Plusieurs réponses pointent vers des causes côté HTML/CSS : un DOCTYPE manquant ou des commentaires HTML autour du CSS peuvent empêcher l'affichage des menus secondaires. D'autres conseils recommandent de décommenter le CSS en retirant les balises et de tester sur une page vierge afin d'isoler l'effet des styles. La discussion signale une résolution possible via le DOCTYPE HTML 4.01 Transitional, et rappelle ensuite de vérifier que le style est bien chargé sans obstructions.

Bobot (l’IA à votre service)
  2. 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
    2. 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
      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...
        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>
          1. Breub62
            C'est toi qui as tout mis en commentaires?
          2. Breub62
            Quand je décommente, j'ai tout comme il faut...
            http://www.cijoint.fr/cj201007/cijGQHC1VC.jpg
        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
          1. Breub62
            Oui tout marche, la seule chose que j'ai faite c'est décommenter ton css...
        4. gyom
          desolé d'etre aussi boulet mais qu'est ce que tu appelles decommenter le css???
          1. Breub62
            Quand tu as ceci : 
            <style type="text/css"><!--  
... 

--></style>

            Pour que ton css soit pris en compte, tu dois enlever <!-- et -->
        5. gyom
          ok dac merci de m'avoir eclairer, vraiment cool de ta part, @ +
          1. Breub62
            De rien ;-)
            Tout fonctionne?
          2. gyom
            pas encore essayé mais ça me semble logique, donc ça devrait marcher, merci!
        6. gyom
          alors jcapte pas jai bien enlevé les <!-- et --> jai toujours qu'une categorie...la vraiment je vois pas...
          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>
        7. gyom
          jai copié collé ton code en source dans NVU, puis aperçu dans le navigateur, et toujours rien, je desespere...
          1. Breub62
            Rien du tout? Ou toujours que le 1er?

            Sur Notepad ça marche nickel...
            Tu l'as bien testé sur une page vierge?
        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....
          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...
            1.  Breub62
              Précision, il semblerait que tous les sous-menus soient bien présents mais ils se superposent les uns sur les autres...
              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>...
                1. gyom
                  chapeau man!!!

                  bravo a toi et merci pour ces infos!!!

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

                Discussions similaires

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

                7 réponses
                Comment activer le Bluetooth sur une TV Samsung ?
                zaraki490

                110 réponses
                Mon PC marque press the esc key for startup menu
                Jonas2022

                5 réponses
                menu caché
                laurent

                7 réponses