带动画的 CSS 下拉菜单（无 js）

尝试使用 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 向下滚动，但它只是不断出现。有什么想法吗？干杯

请参阅此主题以供参考：我怎样才能过渡高度：0；高度：自动；使用CSS？ https://stackoverflow.com/questions/3508605/css-transition-height-0-to-height-auto

简单地说，你不能将动画设置为height: auto;。不支持。如果您有预先确定的固定高度，则可以通过将动画设置为该特定值来实现。例如 0 像素到 100 像素。但不支持自动。

上面链接中的第一个答案链接到另一篇文章，其中给出了一种解决方法。您可以探索它以在您的网站上实施。

你能使用 CSS3 从 height:0 过渡到内容的可变高度吗？ https://stackoverflow.com/questions/3149419/can-you-use-css3-to-transition-from-height0-to-the-variable-height-of-content