这样的下拉效果如何实现？

这效果是鼠标经过灰色区域自动显示全部dd内容部分
<style>
.a  { background-color:#CCC; height:100px; width:100px; overflow:hidden;}
.a:hover { height:auto;}
dd { float:left; height:20px; overflow:hidden; display:block}
</style>
<div class="a">
    <dl>
    <dt></dt>
        <dd>1111</dd>
        <dd>222</dd>
        <dd>333</dd>
        <dd>4444</dd>
        <dd>55555</dd>
        <dd>6666</dd>
        <dd>7777</dd>
    </dl>
</div>

现在想要的效果，那个灰色框可不可有慢慢延伸的过程，和收缩的过程。


请大家帮帮忙，跪求相关实便代码，谢谢