Jquery
<script language="javascript">
$(document).ready(function(){
   //首先找到所有主菜单,然后给所有主菜单注册点击事件
var aa = $("ul#menu")
var as =aa.find("li > a ");
alert(as);
as.click(function(){
     var aNode = $(this);   
     var lis = aNode.nextAll("ul :first");
      //让子节点显示或隐藏
  aNode.find("img").attr("src",function(){
  var a_src =this.src.split("/");
  var isize  =a_src.length;
  if ($.trim(a_src[isize-1])=="ico_4.jpg"){
   return "../images/ico_6.jpg";
  }
   return "../images/ico_4.jpg";
  });
  lis.slideToggle('fast');

   });
});
</script>
<ul id="menu" style="width: 150px;" >
<li id="active">
<a href="#" id="current">Item one <img src="../images/ico_4.jpg"
id="left_a_img">
</a>
<ul id="subnavlist" style="display: none">
<li id="subactive">
<a href="#" id="subcurrent">Subitem one</a>
</li>
<li>
<a href="#">Subitem two</a>
</li>
<li>
<a href="#">Subitem three</a>
</li>
<li>
<a href="#">Subitem four</a>
</li>
</ul>
</li>

<li id="active">
<a href="#" id="current">Item two <img src="../images/ico_4.jpg" id="left_a_img">
</a>
<ul id="subnavlist" style="display: none">
<li id="subactive">
<a href="#" id="subcurrent">Subitem one</a>
</li>
<li>
<a href="#">Subitem two</a>
</li>
<li>
<a href="#">Subitem three</a>
</li>
<li>
<a href="#">Subitem four</a>
</li>
</ul>
</li>

<li id="active">
<a href="#" id="current">Item three <img src="../images/ico_4.jpg"
id="left_a_img">
</a>
<ul id="subnavlist" style="display: none">
<li id="subactive">
<a href="#" id="subcurrent">Subitem one</a>
</li>
<li>
<a href="#">Subitem two</a>
</li>
<li>
<a href="#">Subitem three</a>
</li>
<li>
<a href="#">Subitem four</a>
</li>
</ul>
</li>

<li id="active">
<a href="#" id="current">Item four <img src="../images/ico_4.jpg"
id="left_a_img">
</a>
<ul id="subnavlist" style="display: none">
<li id="subactive">
<a href="#" id="subcurrent">Subitem one</a>
</li>
<li>
<a href="#">Subitem two</a>
</li>
<li>
<a href="#">Subitem three</a>
</li>
<li>
<a href="#">Subitem four</a>
</li>
</ul>
</li>
</ul>
<div style="width: 800px; background-color: #FFFFFF; margin: 0px; padding: 0px;" align="center">
<img src="../images/hrblue.gif" style="border: none;" width="700px;">
<div class="cls_border">
<div id="arrow_left" class="cls_scroll_left"></div>
<div id="scroll_container" class="cls_scroll_middle">
<div class="cls_scroll_child">
<ul >
<li>
<a href="../jsp/index.do?status=queryAllDell"><img
src="../sc/js/scroll/testImages/001.jpg" width="120"
height="90" alt="戴尔电脑" title="戴尔电脑" /> </a>
</li>
<li>
<a href="../jsp/index.do?status=queryAllDell"><img
src="../sc/js/scroll/testImages/002.jpg" width="120"
height="90" alt="戴尔电脑" title="戴尔电脑" /> </a>
</li>
<li>
<a href="../jsp/index.do?status=queryAllDell"><img
src="../sc/js/scroll/testImages/003.jpg" width="120"
height="90" alt="戴尔电脑" title="戴尔电脑" /> </a>
</li>
<li>
<a href="../jsp/index.do?status=queryAllDell"><img
src="../sc/js/scroll/testImages/004.jpg" width="120"
height="90" alt="戴尔电脑" title="戴尔电脑" /> </a>
</li>
<li>
<a href="../jsp/index.do?status=queryAllThinkpad"><img
src="../sc/js/scroll/testImages/005.jpg" width="120"
height="90" alt="联想ThinkPad" title="联想ThinkPad" /> </a>
</li>
<li>
<a href="../jsp/index.do?status=queryAllThinkpad"><img
src="../sc/js/scroll/testImages/006.jpg" width="120"
height="90" alt="联想ThinkPad" title="联想ThinkPad" /> </a>
</li>
<li>
<a href="../jsp/index.do?status=queryAllThinkpad"><img
src="../sc/js/scroll/testImages/007.jpg" width="120"
height="90" alt="联想ThinkPad" title="联想ThinkPad" /> </a>
</li>
</ul>
</div>
</div>
<div id="arrow_right" class="cls_scroll_right"></div>
</div>
<script type="text/javascript" src="../sc/js/scroll/scroll.js"></script>
</div>