仅仅使用 CSS 做个下拉菜单的动画

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/henryhu712/article/details/82967003

关键是使用 max-height, 只要设置的值大于要显示的元素的高就可以：

HTML

<div id="menu">
    <a>hover me</a>
    <ul id="list">
        <!-- Create a bunch, or not a bunch, of li's to see the timing. -->
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>

CSS

#menu #list {
    max-height: 0;
    transition: max-height 0.15s ease-out;
    overflow: hidden;
    background: #d5d5d5;
}

#menu:hover #list {
    max-height: 500px;
    transition: max-height 0.25s ease-in;
}

https://stackoverflow.com/a/8331169