Menu déroulant html/css en superposition
Résolu
Ripley69
Messages postés
44
Statut
Membre
-
Pitet Messages postés 2845 Statut Membre -
Pitet Messages postés 2845 Statut Membre -
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.
A voir également:
- Css menu déroulant
- Menu déroulant excel - Guide
- Excel menu déroulant en cascade - Guide
- Menu déroulant google sheet - Accueil - Guide bureautique
- Editeur html - Télécharger - HTML
- Canon quick menu - Télécharger - Utilitaires
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,
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,
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.
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.
Je vais essayer d'intégrer ça sur ma page, j'espère que ça fonctionnera.
Bonne journée en tous cas !
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 ?