使用CSS3的垂直手风琴导航栏

Question

使用纯css3创建了一个类似导航栏的垂直手风琴。一切都很好，我只想添加一个转换。

使用-webkit-transition: height 1s ease-in;尝试但未发生的事情。

FIDDLE

请帮助我制作动画。

Answer 1

您正在转换height，但没有height分配给.sub-menu，而且，您无法转发display: none;元素，因此请指定height: 0; } .sub-menu

.sub-menu {
    height: 0;
    overflow: hidden;
}

Demo

Demo 2（更好在崩溃时转换）

您不需要display: none;和display: block; height: 0;，overflow: hidden;就足以满足您的需求。