อยากทำบาร์ขยายได้ ต้องทำยังไงครับ อยากทำปุ่ม button บาร์แบบ kapook (ขยายได้-ย่อได้) ไม่ทราบต้องเขียนแนวๆไหนครับ

<style>
.rambobar { height:71px; width:1003px;  }
.rambobar ul { position:absolute; top:0; z-index:99; }
.rambobar li { width:75px; float:left; margin:0 0 0 0; text-align:center; }
.rambobar li strong { padding:0; font-weight:normal; text-align:center; display:block; position:relative; top:-8px; }
.rambobar li a { color:#999999; }
.ramboico { position:relative; z-index:9; }
.ramboico:hover { background-color:transparent; z-index: 50; }
.ramboico:hover img.rambomini { visibility:hidden; }
.ramboico:hover li { width:100px; }
.ramboico span { position:absolute; left:-1500px; visibility: hidden; cursor:pointer; }
*html body .ramboico:hover span { visibility: visible; top:-40px; left:-25px; }
html>body .ramboico:hover span { visibility: visible; bottom:0px; left:-25px; }
</style>

<div id="menu"> 
<div class="rambobar"> 
<!-- code menu dock --> 
<ul> 
<li>
<a href="#" class="ramboico" title="เกมส์" target="_blank">
<img src="http://my.kapook.com/images2/ico_game_50.png" width="50" height="64" border="0" alt="เกมส์" class="rambomini photopng" /><span><img src="http://my.kapook.com/images2/ico_game_100.png" border="0" /></span></a></li> 
</ul> 
<!-- End code menu dock --> 
</div>