!!!@@@----JS折叠菜单的求助(请帮下我啊!)---@@@!!!

代码如下:
<script type="text/javascript"> 
                            
 function tmp(mymenu)
{   myobj=document.getElementById(mymenu);
   
   vis=(myobj.style.display!="none");
   //判断
   if (vis)
    {
     myobj.style.display="none";   } 
else 
{
      myobj.style.display="block";   }
}
                            </script>
(以下的我嵌套在框架的左框架)
<div class="menu_master" onclick="javascript:tmp('M1');" style="text-align:center;"> 
       测试测试</div> 
    <div id='M1' style="display:none;" class="sub_menu">
    <ul>
    <li><a href="#" title="测试测试">测试测试</a></li>
    <li><a href="#" title="测试测试">测试测试</a></li>
    <li><a href="#" title="测试测试">测试测试</a></li>
    <li><a href="#" title="测试测试">测试测试</a></li>
    <li><a href="#" title="测试测试">测试测试</a></li>
    <li><a href="#" title="测试测试">测试测试</a></li>
..........
    </ul></div>  
<div class="menu_master" onclick="javascript:tmp('M2');" style="text-align:center;"> 
       测试测试</div> 
    <div id='M2' style="display:none;" class="sub_menu">
    <ul>
    <li><a href="#" title="测试测试">测试测试</a></li>
    <li><a href="#" title="测试测试">测试测试</a></li>
    <li><a href="#" title="测试测试">测试测试</a></li>
    <li><a href="#" title="测试测试">测试测试</a></li>
    <li><a href="#" title="测试测试">测试测试</a></li>
    <li><a href="#" title="测试测试">测试测试</a></li>
..........
    </ul></div> 
.............
问题:
当li的数目很多时就会在左框架出现滚动条,不然多出网页高度的<li>就显示不出来.可是我不想要滚动条.别人告诉我说可以用JS控制里面的<li>显示...比如说当两个<div>间只能显示5个<li>,超过5时就出现两个浮动的箭头.点击向上小箭头显示上面的...点击向下的显示向下的...
<li>...这样子用JS怎么做啊?麻烦指教下...急切等待!!