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.

2 réponses

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 545
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,
0
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 !
0
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 ?
0