带动画的CSS下拉菜单(无js)

Question

尝试使用CSS动画创建动画下拉菜单,没有任何JS.我以为我一直在吠叫正确的树,但看不到我出错的地方,这个简化的菜单项...

<div class="menu">Menu Item
    <ul>
        <li>Dropdown 1</li>
        <li>Dropdown 2</li>
        <li>Dropdown 3</li>
        <li>Dropdown 4</li>
        <li>Dropdown 5</li>
    </ul>
</div>

以下CSS;

.menu ul {
    height: 0px;
    overflow: hidden;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.menu:hover ul {
    height: auto;
}

认为应该成功地导致向下滚动div,但它只是不断出现.有什么想法吗？干杯

Answer 1

请参阅此主题以供参考:如何转换高度:0; 高度:自动; 用CSS？

简单地说,你不能动画height: auto;.它不受支持.如果您具有预定的固定高度,则可以通过设置该特定值的动画来实现.例如0px到100px.但是不支持自动.

上面链接中的第一个答案链接到另一篇文章,其中给出了一种解决方法.您可以浏览一下,以便在您的网站上实施.

你能用CSS3从height:0过渡到内容的可变高度吗？