CSS平滑下拉菜单

Question

我有一个垂直导航菜单，我希望能够悬停在父项目上以显示他们的孩子。我希望孩子们从他们的父母身上“跌落”，并“推”其他物品（首先不显示儿童）。

下面是使用WebKit的过渡和转换的CSS我的失败尝试：

.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> 

（这是WordPress的PHP产生的）。

所以我想要的是我和我们从“关于”悬停时“跌落”。

我知道我用translate错，因为这会推动孩子们的物品，当我想让他们落在他们属于更高的地方时。我希望我很清楚。非常感谢！

Answer 1

一种方法是在主菜单上设置背景色，绝对放置子菜单，使用负值z-index将子菜单置于父级下，然后使用transform: translateY()进行转换。

* {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>