我写的一个手风琴效果

body, dl, dd, ul, li { margin: 0; padding: 0 }
dl { width: 500px; margin: 0 auto; overflow: hidden }
dt { border-radius: 10px; background: gray; color: #FFF; padding: 10px; margin: 2px 0; cursor: default; transition: background 1s }
dd { border-radius: 10px; padding: 0 20px; background: #eee; height: 0; overflow: hidden; }
dt:hover { background: #bbb }
dd.first { height: auto }
ul { list-style: none }

<dl id="test1">
  <dt>导航1</dt>
  <dd class="first">
    <ul>
      <li>111111</li>
      <li>111111</li>
      <li>111111</li>
    </ul>
  </dd>
  <dt>导航2</dt>
  <dd>
    <ul>
      <li>222222</li>
      <li>222222</li>
      <li>222222</li>
    </ul>
  </dd>
  <dt>导航3</dt>
  <dd>
    <ul>
      <li>3333333</li>
      <li>3333333</li>
      <li>3333333</li>
    </ul>
  </dd>
  <dt>导航4</dt>
  <dd>
    <ul>
      <li>4444444</li>
      <li>4444444</li>
      <li>4444444</li>
    </ul>
  </dd>
  <dt>导航5</dt>
  <dd>
    <ul>
      <li>5555555</li>
      <li>5555555</li>
      <li>5555555</li>
    </ul>
  </dd>
  <dt>导航6</dt>
  <dd>
    <ul>
      <li>6666666</li>
      <li>6666666</li>
      <li>6666666</li>
    </ul>
  </dd>
</dl>

(function($){
    $.fn.sfq=function(options){
        var defaults={
            width:500
            },
        options=$.extend(defaults,options);
        var $sfq=$(this);
            $sfq.width(options.width);
        var dt=$sfq.children("dt");
        var dd=$sfq.children("dd");
        dt.hover(function(){
            var index=dt.index(this);
            this.timer=setTimeout(function(){
                var dHeight=dt.eq(index).next().find("ul").height();
                dt.eq(index).next().animate({"height":dHeight},500)
                  .siblings("dd").animate({"height":"0px"},500);
            },300);
        },function(){
            clearTimeout(this.timer)
        })
    }
})(jQuery)

$(function(){
    $("#test1").sfq({"width":"300"})
})