CSS3：高度转换不工作 - 特定用例

Question

我已经制作了这个codepen，它是我的代码的简化版本： http://codepen.io/anon/pen/pjZXob

我正在尝试将.destinationsTopicContent div转换为height from 0 to auto;但是在此用例中，它嵌套在可见性：隐藏div中。

有人可以帮我修一下这支笔，所以身高会像这里一样过渡： http://jsfiddle.net/thechrisjordan/3Fc7D/23/

我已经使它在其他html结构中工作（就像在小提琴中找到的那样），但是在这个特定的用例中，我似乎无法使其工作。

（最好其他div的属性不会改变）

Answer 1

 #list {
    max-height: 0;
    transition: all .9s ease-out;
    overflow: hidden;
    background: #d5d5d5;
}

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

这是......它的工作......