Probleme menu deroulant

Résolu

gyom -
Breub62 Messages postés 3452 Statut Membre - 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

Afficher la suite

17 réponses

Réponse 1 / 17
Breub62 Messages postés 3452 Statut Membre 369

Je ne comprends pas vraiment ta question, ni ton problème...
0
Réponse 2 / 17
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
Réponse 3 / 17
Breub62 Messages postés 3452 Statut Membre 369

C'est exactement ce que ce code fait si je ne m'abuse?
0
Réponse 4 / 17
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
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Réponse 5 / 17
Breub62 Messages postés 3452 Statut Membre 369

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
Réponse 6 / 17
gyom

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>
0
1. Breub62 Messages postés 3452 Statut Membre 369
  
  C'est toi qui as tout mis en commentaires?
  
  0
2. Breub62 Messages postés 3452 Statut Membre 369
  
  Quand je décommente, j'ai tout comme il faut...
  http://www.cijoint.fr/cj201007/cijGQHC1VC.jpg
  
  0
Réponse 7 / 17
gyom

oui (fallait ptete pas desole)
0
Réponse 8 / 17
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 Messages postés 3452 Statut Membre 369
  
  Oui tout marche, la seule chose que j'ai faite c'est décommenter ton css...
  
  0
Réponse 9 / 17
gyom

desolé d'etre aussi boulet mais qu'est ce que tu appelles decommenter le css???
0
1. Breub62 Messages postés 3452 Statut Membre 369
  
  Quand tu as ceci :
  <style type="text/css"></style>
  
  Pour que ton css soit pris en compte, tu dois enlever 
  
  0
Réponse 10 / 17
gyom

ok dac merci de m'avoir eclairer, vraiment cool de ta part, @ +
0
1. Breub62 Messages postés 3452 Statut Membre 369
  
  De rien ;-)
  Tout fonctionne?
  
  0
2. gyom
  
  pas encore essayé mais ça me semble logique, donc ça devrait marcher, merci!
  
  0

gyom

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

Breub62 Messages postés 3452 Statut Membre 369

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

jai copié collé ton code en source dans NVU, puis aperçu dans le navigateur, et toujours rien, je desespere...
0
1. Breub62 Messages postés 3452 Statut Membre 369
  
  Rien du tout? Ou toujours que le 1er?
  
  Sur Notepad ça marche nickel...
  Tu l'as bien testé sur une page vierge?
  
  0
Réponse 13 / 17
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
Réponse 14 / 17
Breub62 Messages postés 3452 Statut Membre 369

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
Réponse 15 / 17
Breub62 Messages postés 3452 Statut Membre 369

Précision, il semblerait que tous les sous-menus soient bien présents mais ils se superposent les uns sur les autres...
0
Réponse 16 / 17
Breub62 Messages postés 3452 Statut Membre 369
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
Réponse 17 / 17
gyom

chapeau man!!!

bravo a toi et merci pour ces infos!!!

a+
0
1. Breub62 Messages postés 3452 Statut Membre 369
  
  De rien.
  Bonne continuation...
  @+
  
  0

Probleme menu deroulant

17 réponses

Discussions similaires

Newsletters