Menu déroulant html/css en superposition
Résolu
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.
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.
2 réponses
-
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,-
-
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 ?
-
-
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.
