Menu déroulant html/css en superposition

Résolu/Fermé

Ripley69 Messages postés 40 Date d'inscription dimanche 27 décembre 2015 Statut Membre Dernière intervention 6 juillet 2018 - 23 mai 2016 à 10:43
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 - 23 mai 2016 à 17:36

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 lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
23 mai 2016 à 12:06

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,

Ripley69 Messages postés 40 Date d'inscription dimanche 27 décembre 2015 Statut Membre Dernière intervention 6 juillet 2018
23 mai 2016 à 12:53

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

Bonne journée en tous cas !

Ripley69 Messages postés 40 Date d'inscription dimanche 27 décembre 2015 Statut Membre Dernière intervention 6 juillet 2018
23 mai 2016 à 14:18

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 ?

Réponse 2 / 2

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
23 mai 2016 à 14:44

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.

Ripley69 Messages postés 40 Date d'inscription dimanche 27 décembre 2015 Statut Membre Dernière intervention 6 juillet 2018
23 mai 2016 à 17:22

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 !

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
23 mai 2016 à 17:36

N'hésite pas à nous montrer ton code si tu as encore des soucis.

Discussions similaires

Comment faire un menu déroulant en HTML?

Le menu Démarrer ne s'affiche pas sous Windows 10

chercher menu sur navigateur

Combiné recherche V et liste déroulante

TV philips bloquer en mode hotel

Menu démarrer et paramètres innaccessibles

Discussions similaires

Newsletters