这样的下拉效果如何实现？
这效果是鼠标经过灰色区域自动显示全部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>
现在想要的效果，那个灰色框可不可有慢慢延伸的过程，和收缩的过程。
请大家帮帮忙，跪求相关实便代码，谢谢
