用css动画垂直子菜单

Question

我们有一个菜单，其中一些菜单有子菜单。我想显示子菜单时，来显示与动画块。特别是子菜单的高度。例如:

#menu ul.sub_menu {
    display             : none;
}
#menu li:hover ul.sub_menu {
    display             : block;
}

请参阅我的代码jsfiddle.net/oa6ftrL8/，谢谢

Answer 1

不能为display属性设置动画。用opacity: 0;代替display: none;，用opacity: 1;代替display: block;

为动画添加一些max-height: 0;和max-height: fartoomanypx;(因为height不能动画到auto)。

https://jsfiddle.net/oa6ftrL8/1/