28172 sujets

CSS et mise en forme, CSS3

[Résolu] Sous-sous-menu flex

Bonjour,
2 prblm (au moins)
1) Si j'écris dans le <script> du menu déroulant ci-dessous :
nav ul li ul li ul {
 display:none;
 }

le sous-sous-menu apparaît alors que selon moi il ne devrait pas apparaître puisque la 3e ul est en "display:none;" mail il apparaît qd même… mystère. J'ai résolu le prblm en écrivant :
nav ul li ul li ul li {
 display:none;
 }

mais ça ne me semble pas très juste…

2) Problème CSS je crois à propos de ce sous-sous-menu que je n'arrive pas à caler en haut : quand on survole "item2" puis "item6" dans le "sous-menu" apparaît le "sous-sous-menu" mais celui-ci ne se cale pas en face de "item6"… Je n'arrive pas à comprendre pourquoi… merci d'avance à toute personne qui pourra m'aider,
Bien cordialement,
Rémi


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>

<style>

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

nav li {
  flex: auto ;
}

nav ul li{
position:relative;
}


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,nav ul li ul li ul li {
 display:none;
 }    

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

nav ul li ul li:hover ul li {
  display: block; /* affichage vertical */
  flex:none;
    
}
    
nav li:hover ul li,nav li:hover ul li ul li {
  background: slategray;
  
}   

nav  li ul, nav  li ul li ul   {
position: absolute;
padding-left:0;

 }
	
nav ul li ul li:hover ul  {
  position: absolute;
  display: block; /* affichage vertical */
  padding-left: 100%;
}

</style>

</head>


<body>

<nav>

	<ul>
          <li><a href="#">item1</a></li>
          <li><a href="#">item2</a>
          		<ul>
                    <li><a href="#">item6</a>
							<ul>
								<li><a href="#">item8</a></li>
								<li><a href="#">item9</a></li>
							</ul>
					</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>

</body>
</html>
Hello,

Bon désolé j'ai pas sûrement pas tout compris à ton post mais je vais quand même essayer de t'aider.

Problème 1 : Pour le coup je n'ai pas vraiment compris le problème lol désolé

Problème 2 : Tu places ton `nav ul li ul li:hover ul` en absolute sans le positionner, il suffit que tu lui rajoute un `top: 0;` comme ci-dessous, pour le faire remonter au niveau de son parent relatif.


nav ul li ul li:hover ul {
    position: absolute;
    display: block;
    padding-left: 100%;
    top: 0;
}


Si tu veux supprimer l'espace au dessus pour qu'il soit aligner parfaitement avec son parent, tu peux rajouter un `padding-top: 0;` sur le bout de code precedent, ou le supprimer de celui-ci :


nav ul li:hover ul {
    display: block;
    padding-top: 5px; /* --> A supprimer */
    margin: 0;
    flex: none;
}

Modifié par xavierlet (24 Apr 2019 - 14:19)
Bonjour,
Merci pour le coup de main, utile et sympathique comme toujours. Smiley cligne
Bonne journée,
RL
Sujet clos
Aller à