Probleme menu deroulant

Résolu/Fermé

gyom - 21 juil. 2010 à 10:26
Breub62 Messages postés 2989 Date d'inscription lundi 7 juin 2010 Statut Membre Dernière intervention 17 avril 2014 - 21 juil. 2010 à 14:31

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

A voir également:

Probleme menu deroulant
Menu déroulant excel - Guide
Excel menu déroulant en cascade - Guide
Menu démarrer windows 11 - Guide
Canon quick menu - Télécharger - Utilitaires
Menu demarrer - Guide

17 réponses

Réponse 1 / 17

Breub62 Messages postés 2989 Date d'inscription lundi 7 juin 2010 Statut Membre Dernière intervention 17 avril 2014 369
21 juil. 2010 à 10:31

Je ne comprends pas vraiment ta question, ni ton problème...

Réponse 2 / 17

gyom
21 juil. 2010 à 10:53

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

Réponse 3 / 17

Breub62 Messages postés 2989 Date d'inscription lundi 7 juin 2010 Statut Membre Dernière intervention 17 avril 2014 369
21 juil. 2010 à 10:57

C'est exactement ce que ce code fait si je ne m'abuse?

Réponse 4 / 17

gyom
21 juil. 2010 à 11:15

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

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 17

Breub62 Messages postés 2989 Date d'inscription lundi 7 juin 2010 Statut Membre Dernière intervention 17 avril 2014 369
21 juil. 2010 à 11:20

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...

Réponse 6 / 17

gyom
21 juil. 2010 à 11:24

tiens je te passe le css :

<style type="text/css"></style>

<style type="text/css"></style>

<style type="text/css"></style>

<style type="text/css"></style>

Breub62 Messages postés 2989 Date d'inscription lundi 7 juin 2010 Statut Membre Dernière intervention 17 avril 2014 369
21 juil. 2010 à 11:28

C'est toi qui as tout mis en commentaires?

Breub62 Messages postés 2989 Date d'inscription lundi 7 juin 2010 Statut Membre Dernière intervention 17 avril 2014 369
21 juil. 2010 à 11:32

Quand je décommente, j'ai tout comme il faut...
http://www.cijoint.fr/cj201007/cijGQHC1VC.jpg

Réponse 7 / 17

gyom
21 juil. 2010 à 11:30

oui (fallait ptete pas desole)

Réponse 8 / 17

gyom
21 juil. 2010 à 11:39

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

Breub62 Messages postés 2989 Date d'inscription lundi 7 juin 2010 Statut Membre Dernière intervention 17 avril 2014 369
Modifié par Breub62 le 21/07/2010 à 11:41

Oui tout marche, la seule chose que j'ai faite c'est décommenter ton css...

Réponse 9 / 17

gyom
21 juil. 2010 à 11:56

desolé d'etre aussi boulet mais qu'est ce que tu appelles decommenter le css???

Breub62 Messages postés 2989 Date d'inscription lundi 7 juin 2010 Statut Membre Dernière intervention 17 avril 2014 369
Modifié par Breub62 le 21/07/2010 à 11:59

Quand tu as ceci :

<style type="text/css"><!--  
... 

--></style>

Pour que ton css soit pris en compte, tu dois enlever

Réponse 10 / 17

gyom
21 juil. 2010 à 12:01

ok dac merci de m'avoir eclairer, vraiment cool de ta part, @ +

Breub62 Messages postés 2989 Date d'inscription lundi 7 juin 2010 Statut Membre Dernière intervention 17 avril 2014 369
21 juil. 2010 à 12:03

De rien ;-)
Tout fonctionne?

gyom
21 juil. 2010 à 12:04

pas encore essayé mais ça me semble logique, donc ça devrait marcher, merci!

Réponse 11 / 17

gyom
21 juil. 2010 à 12:17

alors jcapte pas jai bien enlevé les  jai toujours qu'une categorie...la vraiment je vois pas...

Breub62 Messages postés 2989 Date d'inscription lundi 7 juin 2010 Statut Membre Dernière intervention 17 avril 2014 369
21 juil. 2010 à 12:19

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>

Réponse 12 / 17

gyom
21 juil. 2010 à 13:32

jai copié collé ton code en source dans NVU, puis aperçu dans le navigateur, et toujours rien, je desespere...

Breub62 Messages postés 2989 Date d'inscription lundi 7 juin 2010 Statut Membre Dernière intervention 17 avril 2014 369
21 juil. 2010 à 13:51

Rien du tout? Ou toujours que le 1er?

Sur Notepad ça marche nickel...
Tu l'as bien testé sur une page vierge?

Réponse 13 / 17

gyom
21 juil. 2010 à 14:03

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....

Réponse 14 / 17

Breub62 Messages postés 2989 Date d'inscription lundi 7 juin 2010 Statut Membre Dernière intervention 17 avril 2014 369
21 juil. 2010 à 14:13

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...

Réponse 15 / 17

Breub62 Messages postés 2989 Date d'inscription lundi 7 juin 2010 Statut Membre Dernière intervention 17 avril 2014 369
21 juil. 2010 à 14:16

Précision, il semblerait que tous les sous-menus soient bien présents mais ils se superposent les uns sur les autres...

Réponse 16 / 17

Breub62 Messages postés 2989 Date d'inscription lundi 7 juin 2010 Statut Membre Dernière intervention 17 avril 2014 369
21 juil. 2010 à 14:20

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>...

Réponse 17 / 17

gyom
21 juil. 2010 à 14:27

chapeau man!!!

bravo a toi et merci pour ces infos!!!

a+

Breub62 Messages postés 2989 Date d'inscription lundi 7 juin 2010 Statut Membre Dernière intervention 17 avril 2014 369
21 juil. 2010 à 14:31

De rien.
Bonne continuation...
@+

Discussions similaires

Suppression listes déroulantes

les entrées et les sortées

Supprimer liste déroulante Excel

mon ordi marque press the esc key for startup menu

Discussions similaires

Newsletters