1486 sujets

Web Mobile et responsive web design

[Résolu] Sous-menu flex

Bonjour,
J'aimerais intégrer un menu flex dans un site. Le menu en lui-même fonctionne très bien, c'est le sous-menu (sous "item 2") que je n'arrive pas à caler… J'aimerais qu'il prenne les attributs du menu principal, c'est à dire qu'il ait la même taille, "débute" au même endroit et qu'il se réduise dans les mêmes proportions.
Voici le code (repris ici : https://codepen.io/raphaelgoetter/pen/qEObar?editors=110)


nav ul {
  display: inline-flex; 
  flex-direction: row; /* affichage horizontal */
  width: 100%;
}

nav li {
  flex: auto ;
}


nav  li {
  display: block;
  flex: 1; /* occupe la largeur restante */
  transition: flex .4s;
}
nav  li:hover,
nav  li:focus {
  flex: 2;
}

body {
	margin: 20px;
	background: #fff;
	font-family: "Century Gothic", helvetica, arial, sans-serif;
	font-size: 1.1em;
}
nav  {
	padding: 10px;
	color: #fff;
}
nav  li:first-of-type {
	background: dodgerblue;
}
nav  li:nth-of-type(2) {
	background: orange;
}
nav li:nth-of-type(3) {
	background: olivedrab;
}
nav  li:nth-of-type(4) {
	background: hotpink;
}
nav  li:nth-of-type(5) {
	background: slategray;
}

nav  a, nav a:hover{
  display: block;
  padding: .7em;
  color: #fff;
  text-decoration: none;
  border: 1px solid #fff;
  white-space: nowrap;
}


/*menu déroulant*/

nav ul li ul {
 display:none;
 }    

nav ul li:hover ul {
  display: block; /* affichage vertical */
  padding-top: 5px;
  margin: 0;
  width:30%;
  flex:none;  
}
    
nav li:hover ul li {
  background: slategray;
  
}   

nav  li ul  {
position: absolute;
 }




<nav>

	<ul>
          <li><a href="#">item1</a></li>
          <li><a href="#">item2</a>
          		<ul>
                    <li><a href="#">item6</a></li>
                    <li><a href="#">item7</a></li>
                </ul>
           </li>
          <li><a href="#">item3</a></li>
          <li><a href="#">item4</a></li>
          <li><a href="#">item5</a></li>
  
  </ul>
</nav>


J'ai mis un exemple en ligne à cette adresse : https://deartibussequanis.fr/essais/menu_flex.html

C'est la 1ère fois que je poste une demande, je ne sais pas si le sujet a déjà été traité, si c'est le cas, 1000 excuses. Merci pour votre travail, très utile et très clair et votre aide éventuelle.
Bien sincèrement,
Rémi
Pour l'alignement, par défaut, la balise ul a un padding-left. Donc en mettant un padding-left:0; sur le ul du sous-menu, il sera aligné.
Pour la largeur, tu ajoutes un position:relative; sur nav ul li. (sur ton exemple en ligne, il faut retirer le width:30% sur les li du sous-menu)
Ça marche ! Merci bcp !!! ça faisait qlqs heures que je tournais en rond…
Très bonne Journée,
R.
Sujet clos
Aller à