谁能帮我把这个模拟成手风琴效果


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>手风琴效果</title>
<style type="text/css">
.menu_box
{
    width:1003px;
overflow:hidden;
height:268px;
margin:auto; position:relative;
}
*
{
padding: 0px;
margin: 0px;
}
.title_1, .title_2, .title_3, .title_4, .title_5, .title_1_current, .title_2_current, .title_3_current, .title_4_current, .title_5_current
{
width: 40px;
/*height:268px;*/
float: left;
display: inline;
cursor: pointer;
color: #fff;
word-wrap: break-word;
word-break: nomal;
text-align: center;
background:#000;
}
.title_1, .title_2, .title_3
{
padding-top: 85px;
height: 183px;
}
.title_4
{
height: 193px;
padding-top: 75px;
}
.title_5
{
height: 213px;
padding-top: 55px;
}
.title_1,.title_3,.title_5
{
background:url(../images/menu_1_3_5.jpg) no-repeat #000;}
 .title_2,.title_4
 {
 background:url(../images/menu_bg.jpg)  #000;
}
.title_1_current, .title_2_current, .title_3_current, .title_4_current, .title_5_current
{
background: url(../images/menu_current.jpg) no-repeat  #000;
}
.title_1_content, .title_2_content, .title_3_content, .title_4_content, .title_5_content
{
width: 803px;
height: 268px;
float: left;
}
.title_2_content, .title_3_content, .title_4_content, .title_5_content
{
/*display: none;*/
}
.menu_box ul
{
width: 40px;
overflow: hidden;
list-style: none;
}
.menu_box ul li
{
display: block;
padding-left: 15px;/**/
float: left;
width: 10px;
background:#000;
font-size: 14px;
}
.banner_1,.banner_2,.banner_3,.banner_4,.banner_5{
width:1003px;
height:268px;
float:left;
position:absolute;
}
.banner_2{
left:843px;
top:0px;
z-index:2;
}
.banner_3{
left:883px;
top:0px;
z-index:3;
}
.banner_4{
left:923px;
top:0px;
z-index:4
}
.banner_5{
left:963px;
top:0px;
z-index:5;
}
</style></head><body>
<div class="menu_box">
         <div class="banner_1" id="menu_1">
        <div class="title_1 title_1_current">
          <ul>
            <li>为谁做</li>
          </ul>
        </div>
        <div class="title_1_content"><img src="images/banner_Img1_36.jpg" width="803" height="268" /></div>
        </div>
         <div class="banner_2" id="menu_2" onclick="move_div()">
        <div class="title_2">
          <ul>
            <li>为何做</li>
          </ul>
          </div>
         <div class="title_2_content"><img src="images/tel_baoxian_96.jpg" width="803" height="268" /></div>
         </div>
         <div class="banner_3">
        <div class="title_3">
          <ul>
            <li>如何做</li>
          </ul>
        </div>
         <div class="title_3_content"><img src="images/index_banner_03.jpg" width="803" height="268" /></div>
         </div>
         <div class="banner_4">
        <div class="title_4">
          <ul>
            <li>火柴人听杂志</li>
          </ul>
        </div>
         <div class="title_4_content"><img src="images/index_banner_03.jpg" width="803" height="268" /></div>
         </div>
         <div class="banner_5">
        <div class="title_5"  onclick="scroll_tab('5')">
          <ul>
            <li>1+3全人教练系统</li>
          </ul>
        </div>        
         <div class="title_5_content"><img src="images/index_banner_03.jpg" width="803" height="268" /></div>
         </div>
      </div>
</body>
</html>