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"})})