Menu déroulant html/css en superposition

Résolu
Ripley69 Messages postés 40 Date d'inscription   Statut Membre Dernière intervention   -  
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

je cherche à insérer en haut d'une page (entre les titres et le texte) un menu en ligne (3 items) déroulant au passage de la souris. J'aurais besoin qu'il se déroule par-dessus le texte, et pas qu'il décale le texte vers le bas, ce qui est hélas le cas pour l'instant.

J'ai fait ceci : https://jsfiddle.net/Ripley69/vgmcqu6a/15/
en utilisant display: none et display: block avec :hover, mais ça décale le texte à l'affichage.
De plus, je n'arrive pas à mettre mes 3 "têtes" de menu en ligne.

Pour l'instant, il n'y a qu'un seul des trois items (le dernier) dont le menu soit fait. J'attends d'y arriver pour composer les 2 autres.

Merci par avance de votre aide.

A voir également:

2 réponses

Réponse 1 / 2
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527
 
Salut,

Tu peux positionner ton sous menu en "absolute" afin que celui-ci sorte du flux et ne décale pas les autres éléments : https://jsfiddle.net/vgmcqu6a/16/

Bonne journée,
0
Ripley69 Messages postés 40 Date d'inscription   Statut Membre Dernière intervention  
 
Merci beaucoup !
Je vais essayer d'intégrer ça sur ma page, j'espère que ça fonctionnera.

Bonne journée en tous cas !
0
Ripley69 Messages postés 40 Date d'inscription   Statut Membre Dernière intervention  
 
Bon, j'ai modifié mon CSS comme suit : 

nav
{
  background-color: #9D8099;
  opacity: 0.8;
}
nav a
{
  text-decoration: none;
  color: #FFFFFF;
}
nav ul
{
  text-align: center;
  font-size: 30px;
  color: #D9D9D9;
  text-shadow: 6px 6px 6px black;
  line-height: 40px;
  list-style-type: none;
}
nav li
{
	display: inline;
	width: 90%;
	height: 40px;
}
nav ul ul
{
  z-index: 4;
  display: none;
  font-size: 25px;
  text-align: center;
}
nav ul ul li
{
	display: block;
}
li:hover ul.menu2
{
  z-index: 4;
  display: block;
}
.menu2 
{
  z-index: 4;
  position: absolute;
  background-color: #9D8099;
}


J'ai encore un ou deux soucis :
- comment dire à mon menu 2 de s'afficher sous le titre qui est son parent dans le menu 1 ?
- comment faire en sorte que ce menu 2 passe sur le paragraphe <section> qui est en-dessous ?
0
Réponse 2 / 2
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527
 
Tu peux positionner un élément en "absolute" via les propriétés top, left, bottom et right.
Par défaut un élément en "absolute" va se positionner par rapport au coin en haut à gauche de la fenêtre (origine).
En appliquant la propriété "position: relative" sur l'élément parent d'un élément en "absolute", ce dernier se positionne alors par rapport au coin en haut à gauche de l'élément parent.

Tu peux donc appliquer la propriété "position: relative" sur la balise li qui contient le sous-menu, puis positionner ce sous-menu par rapport à ce parent :
https://jsfiddle.net/vgmcqu6a/19/
-> ajout de "position: relative;" dans "nav li"
-> ajout de "top: 40px; left: 0;" dans ".menu2"

Concernant la section, celle-ci apparait bien en dessous du sous-menu comme tu peux le voir dans l'exemple du jsfiddle.
0
Ripley69 Messages postés 40 Date d'inscription   Statut Membre Dernière intervention  
 
Alors en effet dans le JSfiddle le texte de la section est en-dessous, mais dans ma page il reste au-dessus -_- (zen...).
J'ai essayé de modifier le z-index mais ça ne fonctionne pas évidemment.

Bon, en tous les cas merci pour ton aide et surtout tes explications qui sont très claires !
0
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527
 
N'hésite pas à nous montrer ton code si tu as encore des soucis.
0

Discussions similaires

Suppression listes déroulantes
Archa -
Sam -

5 réponses
Supprimer liste déroulante Excel
SamAlex -
b@bd -

8 réponses
Effacer liste déroulante
gabrielle -
jmps -

3 réponses
menu caché
laurent -
ChariduP -

7 réponses
Effacer le contenue d'une cellule avec liste déroulante
lebutters -
lebutters -

7 réponses