Menu déroulant html/css en superposition [Résolu/Fermé]

Signaler
Messages postés
41
Date d'inscription
dimanche 27 décembre 2015
Statut
Membre
Dernière intervention
6 juillet 2018
-
Messages postés
2379
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
10 mars 2020
-
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.

2 réponses

Messages postés
2379
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
10 mars 2020
428
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,
Messages postés
41
Date d'inscription
dimanche 27 décembre 2015
Statut
Membre
Dernière intervention
6 juillet 2018

Merci beaucoup !
Je vais essayer d'intégrer ça sur ma page, j'espère que ça fonctionnera.

Bonne journée en tous cas !
Messages postés
41
Date d'inscription
dimanche 27 décembre 2015
Statut
Membre
Dernière intervention
6 juillet 2018

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 ?
Messages postés
2379
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
10 mars 2020
428
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.
Messages postés
41
Date d'inscription
dimanche 27 décembre 2015
Statut
Membre
Dernière intervention
6 juillet 2018

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 !
Messages postés
2379
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
10 mars 2020
428
N'hésite pas à nous montrer ton code si tu as encore des soucis.