我正在尝试使用CSS转换制作一个＜ul＞幻灯片。
＜ul＞开始于高度：0；。悬停时，高度设置为height:auto；。然而，这导致它简单地出现，
如果我从高度做：40px；至高度：自动；，那么它将向上滑动到高度：0；，然后突然跳到正确的高度。
如果不使用JavaScript，我怎么能做到这一点？
#子0{高度：0；溢出：隐藏；背景色：#dedede；-moz过渡：高度1s容易；-webkit过渡：高度1s轻松；-o过渡：高度1s容易；过渡：高度1s；}#parent0:悬停#child0{高度：自动；}#孩子40{高度：40px；溢出：隐藏；背景色：#dedede；-moz过渡：高度1s容易；-webkit过渡：高度1s轻松；-o过渡：高度1s容易；过渡：高度1s；}#parent40:悬停#child40{高度：自动；}h1小时{字号：粗体；}两个CSS片段之间的唯一区别是一个高度为0，另一个高度是40。<小时><div id=“parent0”><h1>将我悬停（高度：0）</h1><div id=“child0”>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br></div></div><小时><div id=“parent40”><h1>将我悬停（高度：40）</h1><div id=“child40”>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br></div></div>
杰克对最大高度动画化的回答很好，但我发现设置大的最大高度所导致的延迟很烦人。
可以将可折叠内容移动到内部div中，并通过获取内部div的高度来计算最大高度（通过JQuery，它将是outerHeight（））。
$('button').bind('click', function(e) {
e.preventDefault();
w = $('#outer');
if (w.hasClass('collapsed')) {
w.css({ "max-height": $('#inner').outerHeight() + 'px' });
} else {
w.css({ "max-height": "0px" });
}
w.toggleClass('collapsed');
});
这里有一个jsfiddle链接：http://jsfiddle.net/pbatey/duZpT
这里有一个jsfiddle，它提供了所需的绝对最小代码量：http://jsfiddle.net/8ncjjxh8/
编辑：向下滚动以获得更新的答案我在做一个下拉列表，看到了这篇文章。。。很多不同的答案，但我决定分享我的下拉列表。。。它并不完美，但至少它将只使用css进行下拉！我一直在使用transform:translateY（y）将列表转换为视图。。。你可以在测试中看到更多http://jsfiddle.net/BVEpc/4/ 我把div放在每一个li后面，因为我的下拉列表是从上到下的，为了正确地显示它们，这是需要的，我的div代码是：
#menu div {
transition: 0.5s 1s;
z-index:-1;
-webkit-transform:translateY(-100%);
-webkit-transform-origin: top;
}
并且悬停是：
#menu > li:hover div {
transition: 0.5s;
-webkit-transform:translateY(0);
}
因为ul高度设置为可以超过你身体内容的内容，所以我为ul做了这件事：
#menu ul {
transition: 0s 1.5s;
visibility:hidden;
overflow:hidden;
}
并悬停：
#menu > li:hover ul {
transition:none;
visibility:visible;
}
转换后的第二次是延迟，它将在我的下拉列表被动画关闭后隐藏。。。希望以后有人能从中受益。编辑：我真不敢相信人们真的使用了这个原型！此下拉菜单仅用于一个子菜单，仅此而已！！我更新了一个更好的，可以有两个子菜单，用于ltr和rtl方向，支持IE8。LTR的FiddleRTL的Fiddle希望将来有人会发现这很有用。
