Transition

<div id="header">
    <div id="button">This is a Button
        <div class="content">
        This is the Hidden Div
        </div>
    </div>
</div>
<style>
#header #button {width:200px; background:#eee}

#header #button:hover > .content {
    opacity:1;
    height: 150px;
    padding: 8px;   
}

#header #button .content {
    opacity:0;
    clear: both;
    height: 0;
    padding: 0 8px;
    overflow: hidden;
   
    -webkit-transition: all .3s ease .15s;
    -moz-transition: all .3s ease .15s;
    -o-transition: all .3s ease .15s;
    -ms-transition: all .3s ease .15s;
    transition: all .3s ease .15s;
   
    border-top: 1px solid #EEEEEE;
    border-left: 1px solid #EEEEEE;
    border-right: 1px solid #EEEEEE;
    border-bottom: 1px solid #EEEEEE;
   
    -webkit-border-radius: 0px 7px 7px 7px;
    -moz-border-radius: 0px 7px 7px 7px;
    -khtml-border-radius: 0px 7px 7px 7px;
    border-radius: 0px 7px 7px 7px;
   
    -webkit-box-shadow: 0px 2px 2px #DDDDDD;
    -moz-box-shadow: 0px 2px 2px #DDDDDD;
    box-shadow: 0px 2px 2px #DDDDDD;
    background: #FFF;
}
</style>