Discussion :

[mullger]

Bonjour,

Je suis désolé de n'avoir pas donné plus de précisions sur mon problème dans le titre de la discussion mais je ne savais pas comment la nommer.

Je suis entrain de réaliser la barre de menu d'un site internet en CSS elle est horizontale et des sous-menus apparaissent quand la souris passe sur le bouton. Seulement voilà, malgré tous mes essais, les sous-menus s'affichent toujours en ligne alors que j'aimerais qu'ils soient en colonne sous le bonton principal. J'ai bien sûr utilisé la fonction display:block ; mais rien n'y fait.

Quelqu'un pourrait-il me donner un coup de main ? Je vous joins un page html et ma page CSS.

Merci d'avance !

[MasterOfChakhaL]

Salut,

J'ai regardé super vite fait le css.

Je pense que tu devrais faire un truc du genre:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
#menu li {
  display: inline; /*1er niveau de menu -> inline*/
}
 
#menu li li {
  display: block; /* 2eme niveau ( et > ) -> block */
}

[mullger]

Merci beaucoup !

Effectivement maintenant ils sont en colone mais chaque sous menu se décale un peu plus vers la droite. J'ai essayé de mettre margin et padding à 0 et de faire un text-align:left ; dans le même calque mais ça ne fonctionne pas une idée ?

[MasterOfChakhaL]

re,

Je pense qu'il va falloir jouer avec les positionnements...

Si tu mets tes li (de premier niveaux) en relative, leur place ne sera pas modifié mais ils pourront servir d'origine pour placer les éléments enfants.

ensuite, il te suffir de mettre tes listes de second niveaux en absolute.
tu leur affectes un top équivalent à la hauteur de ta barre (histoire que ca soit juste en dessous).

Si tu fais ca, tu devrais commencer a avoir un truc qui ressemble a quelque chose je pense.

en gros:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
#menu li {
  position: relative;
}
#menu ul {
  position: absolute;
  top: 20px;
}

évidemment, le 20px est là a titre indicatif, libre a toi de choisir la taille et l'unité...