CSS Lisse menu déroulant

Question

J'ai un menu de nav vertical sur lequel je veux pouvoir survoler des éléments parents afin de révéler leurs enfants. Je voudrais que les enfants "tombent" de leurs parents et "poussent" les autres objets en le faisant (les enfants ne sont pas affichés au début).

Voilà ma tentative a échoué sur CSS en utilisant des transitions de WebKit et traduire:

.children a { 
    display: none; 
    visibility: hidden; 
    -ms-transform: translate(0, 50px); /* IE 9 */ 
    -webkit-transform: translate(0, 50px); /* Safari */ 
    transform: translate(0, 50px); 

    -webkit-transition: all .5s ease; 
    -moz-transition: all .5s ease; 
    -ms-transition: all .5s ease; 
    -o-transition: all .5s ease; 
    transition: all .5s ease; 
} 

.page_item_has_children:hover .children a { 
    display: block; 
    visibility: visible; 
} 

HTML:

<nav class="site-nav"> 
     <li class="page_item page-item-15"><a href="http://localhost:8888/myWebsite/">Home</a></li> 
     <li class="page_item page-item-22 page_item_has_children"><a href="http://localhost:8888/myWebsite/About/">About</a> 
<ul class='children'> 
    <li class="page_item page-item-81"><a href="http://localhost:8888/myWebsite/About/Me">Me</a></li> 
    <li class="page_item page-item-83"><a href="http://localhost:8888/myWebsite/About/Us">Us</a></li> 
</ul> 
    <li class="page_item page-item-20"><a href="http://localhost:8888/myWebsite/Page1/">Page1</a></li> 
    <li class="page_item page-item-25"><a href="http://localhost:8888/myWebsite/Page2/">Page2</a></li> 

</li> 
    </nav> 

(Ceci est généré par PHP pour Wordpress).

Donc, ce que je voudrais, c'est que "Moi" et "Nous" tombions d'environ lorsque nous planions.

Je sais que j'ai utilisé translate mauvais parce que cela pousse les objets enfants quand je veux qu'ils tombent d'où ils appartiennent de plus haut. J'espère que je suis clair. Merci beaucoup!

Answer 1

Une façon serait de définir une couleur d'arrière-plan sur votre menu principal, positionner absolument le sous-menu, utiliser un z-index négatif pour mettre le sous-menu sous le parent, puis utiliser transform: translateY() pour faire la transition.

* {margin:0;padding:0;} 
 

 
.site-nav { 
 
    position: relative; 
 
    background: white; 
 
} 
 

 
.children { 
 
    transition: all .5s ease; 
 
    opacity: 0; 
 
    z-index: -1; 
 
} 
 

 
.page_item_has_children:hover .children { 
 
    transform: translate(0); 
 
    opacity: 1; 
 
} 
 

 
.children { 
 
    position: absolute; 
 
    transform: translateY(-100%); 
 
}

<ul class="site-nav"> 
 
    <li class="page_item page-item-15"><a href="http://localhost:8888/myWebsite/">Home</a></li> 
 
    <li class="page_item page-item-22 page_item_has_children"><a href="http://localhost:8888/myWebsite/About/">About</a> 
 
    <ul class='children'> 
 
     <li class="page_item page-item-81"><a href="http://localhost:8888/myWebsite/About/Me">Me</a></li> 
 
     <li class="page_item page-item-83"><a href="http://localhost:8888/myWebsite/About/Us">Us</a></li> 
 
    </ul> 
 
    </li> 
 
</ul>