使用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/

你必须开始摆弄自己以使它美丽。