CSS3: height transition not working - specific use case

Question

i have made this codepen which is a simplified version of my code: http://codepen.io/anon/pen/pjZXob

I'm trying to make the .destinationsTopicContent div transition its height from 0 to auto; However in this usecase its nested within a visibility:hidden div.

Can someone please fix this pen for me so the height will transition like here: http://jsfiddle.net/thechrisjordan/3Fc7D/23/

I have made it work in an other html structure (like the one found in the fiddle), however in this specific usecase i can't seem to make it work.

(Preferably the other div's properties don't change)

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;
}

chk thiss...its working ...