CSS Transition on height

by Faisal Khan Janjua

HTML

<div id="menu">
    <a>hover me</a>
    <ol id="list">
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ol>
</div>

CSS

#menu {
  position:relative;
}
#menu #list {
    transition: max-height 0.5s ease-in-out;
    background: #d5d5d5;
    position: absolute;
    overflow: hidden;
    max-height: 0;
    width: 200px;
    padding: 0 25px;
}

#menu:hover #list {
    max-height: 380px;
}