Comportement étrange CSS: débordement et marge gauche

Question

J'essaie de faire une transition agréable pour le menu de mon site: lorsque l'utilisateur survole l'élément parent, les enfants glissent et quand la souris quitte, ils doivent remonter. Mais ils ne le font pas, comme on le voit dans ce fiddle. Puis j'ai demandé de l'aide ici sur SO et a été pointé à l'aide de l'approche overflow: hidden; et seulement la transition height. D'accord. Mais ce cachai les articles de l'élément enfant enfants comme on le voit dans l'extrait ci-dessous:

ul { 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 

 
li { 
 
    width: 180px; 
 
} 
 

 
#menu ul ul { 
 
    position: absolute; 
 
    overflow: hidden; 
 
    background: red none repeat scroll 0 0; 
 
} 
 

 
#menu ul li { 
 
    position: relative; 
 
} 
 

 
#menu ul ul li { 
 
    height: 0; 
 
    transition: height 0.2s ease 0s; 
 
} 
 

 
#menu ul ul ul { 
 
    margin-left: 100%; 
 
    top: 0; 
 
} 
 

 
#menu ul li:hover>ul>li { 
 
    height: 32px; 
 
}

<nav id="menu"> 
 
    <ul> 
 
    <li>Parent Item 
 
     <ul> 
 
     <li>Child Item</li> 
 
     <li>Child Item &gt; 
 
      <ul> 
 
      <li>Child Child Item 1</li> 
 
      <li>Child Child Item 2</li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>

Donc, fondamentalement, les articles « Item enfant Enfant 1 » et « Point enfant Enfant 2 » sont invisibles à l'utilisateur . Comment puis-je avoir à la fois la transition vers le haut/bas de la souris sur le vol stationnaire/quitter et afficher les deux éléments enfants? Peut-il être fait en CSS pur?

Answer 1

Vous pouvez définir une opacity initiale sur la li-0, en plus d'un height de 0.

Sur :hover, modifiez le opacity à 1. Notez que je ne l'ai pas inclus dans l'opacité de l'effet transition. Je pense qu'il peut sembler préférable de changer immédiatement.

mis à jour

Au lieu d'utiliser opacity, je pense que le réglage de la font-size initiale à 0 et l'élargissement produira un effet plus doux. J'ai ajouté des classes aux triggers et aux menus pour plus de clarté.

* { 
 
    cursor: pointer; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 

 
li { 
 
    width: 180px; 
 
} 
 

 
#menu ul ul { 
 
    position: absolute; 
 
    background: red none repeat scroll 0 0; 
 
} 
 

 
#menu ul li { 
 
    position: relative; 
 
} 
 

 
.dropdown-one li, 
 
.dropdown-two li { 
 
    height: 0; 
 
    font-size: 0; 
 
    transition: height 0.2s ease 0s; 
 
} 
 

 
#menu ul ul ul { 
 
    margin-left: 100%; 
 
    top: 0; 
 
} 
 

 
.dropdown-trigger-one:hover .dropdown-one>li, 
 
.dropdown-trigger-two:hover .dropdown-two>li { 
 
    height: 32px; 
 
    font-size: 1em; 
 
}

<nav id="menu"> 
 
    <ul> 
 
    <li class="dropdown-trigger-one">Parent Item 
 
     <ul class="dropdown-one"> 
 
     <li>Child Item</li> 
 
     <li class="dropdown-trigger-two">Child Item &gt; 
 
      <ul class="dropdown-two"> 
 
      <li>Child Child Item 1</li> 
 
      <li>Child Child Item 2</li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>