Menu déroulant et `justify-content:space-between;`

J'aimerais créer un menu déroulant simple, c'est-à-dire une liste avec utilisation de `hover` pour dévoiler une sous-liste.

Le souci est que mon menu est censé utiliser toute la largeur de la page (`justify-content:space-between;`). Du coup, le menu 1 ou 2 se déplace lorsque le sous-menu est dévoilé. Et l'apparition du sous-menu décale le reste de la page vers le bas.

La solution est normalement d'utiliser `position: absolute;` mais cela me fait perdre toute la mise en page du menu (espacement entre les item de niveau 1, utilisation de toute la largeur, etc).

Comment conserver la position du menu de niveau 1 même après dévoilement des sous-menus ?

Mon menu ressemble à cela :

		
<nav>
<ul class="navigation">
		    <li><a href="#">Lien menu 1</a>
			<ul>
			    <li><a href="#">lien sous menu 1</a></li>
			    <li><a href="#">lien sous menu 1</a></li>
			    <li><a href="#">lien sous menu 1</a></li>
			    <li><a href="#">lien sous menu 1</a></li>
			</ul>
		    </li>
		    <li><a href="#">Lien menu 2</a>
			<ul>
			    <li><a href="#">Lien sous menu 2</a></li>
			    <li><a href="#">Lien sous menu 2</a></li>
			    <li><a href="#">Lien sous menu 2</a></li>
			    <li><a href="#">Lien sous menu 2 très très long xxxxxxxxxxxxxxxxxxx</a></li>
			</ul>
		    </li>
		    <li><a href="#">Lien menu 3</a>
			<ul>
			    <li><a href="#">Lien sous menu 3</a></li>
			    <li><a href="#">Lien sous menu 3</a></li>
			    <li><a href="#">Lien sous menu 3</a></li>
			    <li><a href="#">Lien sous menu 3</a></li>
			</ul>
		    </li>
		</ul>
            </nav>
   

et le css :

    header nav .navigation {
    list-style-type:none;
    display:flex;
    -ms-flex-pack:justify;
     justify-content:space-between;
    border-top:1px solid #dedede;
    border-bottom:.2em solid #443f22;
    opacity:0.60;
    margin:24px 0;
    padding:5px 0;
    }
    
    header nav li {
    display:block;
    margin:0 .5em;
    }
    
    nav .navigation,nav ul {
    list-style:none;
    padding:0;
    display:none; /* pour menu déroulant */
    }
    
    nav .navigation,nav li:hover ul {
        display:block; /* pour menu déroulant */
    
    }

Le menu enroulé :


le menu déroulé : on voit bien que "Lien menu 2" s'est déplacé.

Modifié par ppr (27 Nov 2018 - 12:00)

Hello,

Tu n'as pas vraiment le choix si tu ne veux pas pousser les autres éléments : tu vas devoir sortir du flux (via position absolute par exemple).
Par contre, rien ne t'oblige à placer toute la navigation en absolute, ceci fonctionne :

nav li:hover ul {
        position: absolute;
  }

Merci pour la réponse.

J'ai essayé de mettre "position:absolute;" dans

    nav .navigation,nav li:hover ul {
        display:block; /* pour menu déroulant */
        position:absolute;
    }

mais je perds l'espacement entre les items de niveau 1. Il semble que "display:absolute;" s'applique forcément à toute la liste/menu peu importe où on le met.



Comment avoir cet espacement (cf. capture 1) sans que celui-ci ne se modifie lorsqu'on déroule le menu ?
Modifié par ppr (27 Nov 2018 - 13:50)

Bonjour ppr,
Un exemple :
https://codepen.io/Zonecss/pen/LXgBEZ

Merci beaucoup aliasdmc.

C'est presque parfait, l'espacement entre les items de niveau 1 est conservé. Par contre, les items de niveau deux (ceux qui sont enroulés/déroulés) s'affichent sur deux lignes dès qu'ils sont un peu long (par exemple "Lien sous menu 2 très très long xxxxxxxxxxxxxxxxxxx").

Comment faire pour que "Lien sous menu 2 très très long xxxxxxxxxxxxxxxxxxx" ne s'affiche que sur une seule ligne ?
Modifié par ppr (03 Dec 2018 - 15:38)

Une des solutions simples c'est de faire une entrée de menu courte, ou bien alors
faire précéder chaque entrée de menu d'un bullet, ou bien alors
les faire surbriller en cas de hovering.

Un autre souci avec ce menu : seulement le texte des titres de menu est cliquable. Du coup, quand on déroule le menu mais qu'on clique à côté du texte, rien ne se passe.

Une idée pour rendre toute la case cliquable ?

Bonjour ppr,
j'ai mis à jour le codepen :
https://codepen.io/Zonecss/pen/LXgBEZ

Merci ça marche parfaitement.

Pour les visiteurs pressés : il faut rajouter dans le css le code suivant :

header nav > ul > li a{
  display:block; 
  height:100%;
  width:100%;
  padding-left:5px;
  padding-right:5px;
  white-space : nowrap;
}