滑动门

html代码：

 

<div id="wraper">
  <div class="generic">
    <div class="g_left col214">
      <div class="tool">
        <span class="b_t"><span></span></span>
        <div class="box">
          <h3>购房工具</h3>
          <div class="show">
            <h4 onMouseOver="sub_show(this)" class="jsq"><span></span>贷款计算器</h4>
            <div class="showdiv">
              <ul>
                <li><a href="" target="_blank" class="one">购房能力评估</a></li>
                <li><a href="" target="_blank" class="two">等额本息还款法</a></li>
                <li><a href="" target="_blank" class="thr">等额本金还款法</a></li>
                <li><a href="" target="_blank" class="four">提前还贷计算器</a></li>
                <li><a href="" target="_blank" class="five">税费计算器</a></li>
                <li><a href="" target="_blank" class="six">住房公积金贷款器</a></li>
              </ul>
            </div>
          </div>
          <div  class="show_n"> <h4 onmouseover="sub_show(this)" class="fbs"><span></span>乐居房博士</h4>
            <div class="showdiv">
              <div class="wikibox">
                <h5 class="h1">买新房
                  <span><a href="">新盘咨询</a> <a href="">货贷理财</a> <a href="">房产投资</a>
                    <a href="">合同签定</a> <a href="">收房入住</a></span>
                </h5>
                <div class="HSpace01"></div>
                <h5 class="h2">二手房
                  <span><a href="">新盘咨询</a> <a href="">货贷理财</a> <a href="">房产投资</a>
                    <a href="">合同签定</a> <a href="">收房入住</a></span>
                </h5>
                <div class="HSpace01"></div>
                <h5 class="h3">租房
                  <span><a href="">新盘咨询</a> <a href="">货贷理财</a> <a href="">房产投资</a>
                    <a href="">合同签定</a> <a href="">收房入住</a></span>
                </h5>
                <a href="" title="我要提问" class="wytw">我要提问</a>
              </div>
            </div>
          </div>
          <div class="show_n"> <h4 onmouseover="sub_show(this)" class="wiki"><span></span>WIKI专业地产百科</h4>
            <div class="showdiv">
              <div class="fbsbox">
                <a href="" target="_blank" class="f_one">尝试创建词条</a>
                <a href="" target="_blank" class="f_two">参与完善词条</a>
                <a href="" target="_blank" class="f_thr">参加达人任务</a>
              </div>
            </div>
          </div>
        </div>
        <span class="b"></span>
      </div>
    </div>
  </div>
</div>

 

JS代码：

 

<script type="text/javascript">
  function sub_show(obj){
    var elems = document.getElementsByTagName("div");
    for( var i = 0; ( elem = elems[i] ); i++ ){
      if(elem.className == 'show' )elem.className = 'show_n';
      if(elem == obj.parentNode )elem.className = 'show';
    }
  }
</script>

 

css代码：

 

  body, ul, li, h3, h4, h5{
    margin:0;
    padding:0;
  }

  body {
    font-size:12px;
  }

  a:link, a:visited {
    color: #000;
    text-decoration: none;
  }

  a:hover, a:active {
    color: #f00;
    text-decoration: underline;
  }

  #wraper {
    width: 950px;
    margin:0 auto;
    padding:10px 0 20px 0;
  }

  .generic {
    width:950px;
    clear:both;
    overflow:hidden;
  }

  .generic .g_left {
    float:left;
    margin-right:10px;
    display:inline;
  }

  .col214 {
    width:214px;
  }

  span.b_t, span.b_t span, li.hover, .tool h3, .tool span.b, .tool h4, .tool h4 span, .tool .showdiv li a {
    background-image:url(imglp.gif);
    background-repeat:no-repeat;
  }

  .box {
    border:1px solid #d4d4d4;
  }

  span.b_t {
    width:100%;
    display:block;
    position:absolute;
    overflow:hidden;
    left:0px;
    top:0px;
    background-position:-672px -643px;
    height:8px;
  }

  span.b_t span {
    width:7px;
    display:block;
    overflow:hidden;
    float:right;
    background-position:-665px -643px;
    height:8px;
  }

  .tool {
    position:relative;
    margin-bottom:10px;
    height:270px;
  }

  .tool h3 {
    color:#ff5a00;
    padding-left:10px;
    border-bottom:1px solid #d5d5d5;
    font-size:14px;
    height:35px;
    clear:both;
    overflow:hidden;
    line-height:40px;
    background-position:-260px -422px;
  }

  .tool .box {
    height:260px;
    border-bottom:0;
  }

  .tool span.b {
    float:left;
    overflow:hidden;
    display:block;
    height:8px;
    width:214px;
    background-position:-308px -599px;
  }

  .tool h4 {
    border-bottom:1px solid #d3d3d3;
    height:22px;
    line-height:22px;
    padding-left:35px;
    font-size:12px;
    color:#000000;
    cursor:pointer;
  }

  .tool h4 span {
    display:block;
    width:15px;
    height:15px;
    float:right;
    margin-right:10px;
    margin-top:4px;
  }

  .tool .show h4 {
    border-bottom:1px solid #ededed;
    color:#ff5a00;
    background-color:#f6f6f6;
  }

  .tool .show h4 span {
    background-position:-335px -304px;
  }

  .tool .show_n h4 span {
    background-position:-335px -357px;
  }

  .tool h4.jsq {
    background-position:-51px -480px;
  }

  .tool h4.fbs {
    background-position:-51px -515px;
  }

  .tool h4.wiki {
    background-position:-55px -553px;
    height:21px;
    line-height:21px;
  }

  .tool .showdiv {
    border-bottom:1px solid #d3d3d3;
    padding:5px 9px 0 9px;
  }

  .tool .show_n .showdiv {
    display:none;
  }

  .tool .showdiv li {
    padding-bottom:4px;
  }

  .tool .showdiv li a {
    display:block;
    text-indent:-999999px;
    height:21px;
  }

  .tool .showdiv li a.one {
    background-position:-1px -239px;
    width:194px;
  }

  .tool .showdiv li a.two {
    background-position:-195px -239px;
    width:194px;
  }

  .tool .showdiv li a.thr {
    background-position:-389px -239px;
    width:193px;
  }

  .tool .showdiv li a.four {
    background-position:-1px -260px;
    width:193px;
  }

  .tool .showdiv li a.five {
    background-position:-194px -260px;
    width:193px;
  }

  .tool .showdiv li a.six {
    background-position:-387px -260px;
    width:193px;
  }

  .tool .wikibox {
    height:142px;
    overflow:hidden;
  }

  .tool .wikibox h5 {
    padding-bottom:2px;
    font-size:12px;
    padding-left:23px;
    line-height:18px;
  }

  .tool .wikibox h5 span {
    font-weight: normal;
  }

  .tool .wikibox h5.h1 {
    background:url(img_new.gif) 0 -168px no-repeat;
  }

  .tool .wikibox h5.h2 {
    background:url(img_new.gif) 0 -255px no-repeat;
  }

  .tool .wikibox h5.h3 {
    background:url(img_new.gif) 0 -372px no-repeat;
  }

  .HSpace01 {
    background:transparent url(img_new.gif) repeat-x scroll 0 0px;
    font-size:0;
    height:1px;
    overflow:hidden;
    margin-bottom:2px;
  }

  .tool .wikibox p {

    line-height:18px;
    padding-bottom:5px;
  }

  .tool .wikibox p.two_b {
    margin-bottom:8px;
    border-bottom:1px dashed #666666;
  }

  .tool .wikibox a {
    text-decoration:underline;
  }

  .tool .wikibox a.wytw {
    float:right;
    display:block;
    width:73px;
    height:17px;
    background:url(img_new.gif) 0 -477px no-repeat;
    text-indent:-999999px;
  }

  .tool .fbsbox p {
    border-bottom:1px solid #f1f1f1;
  }

  .tool .fbsbox a {
    margin:0 auto;
    display:block;
    width:164px;
    height:43px;
    text-indent:31px;
    background-image:url(img_new.gif);
    background-repeat:no-repeat;
    font-weight:bold;
    line-height:43px;
  }

  .tool .fbsbox a.f_one {
    background-position:0 -8px;
  }

  .tool .fbsbox a.f_two {
    background-position:0 -55px;
  }

  .tool .fbsbox a.f_thr {
    background-position:0 -103px;
  }

 

效果图：