帮我改哈代码，刚学jquery，比较菜

页面就是分了两大块，点大类的时候子内容就显示，鼠标划入li的时候颜色发生了改变现要2处要改下，1：比如当点电子秤的时候  如果下面高清电视 子内容如果是展开的，就收缩回来，反之亦然
2:当鼠标划入li的时候颜色发生了改变，划入到另外一个模块li的时候  先前li的时候颜色就remove也许语言说的不是很清楚，大家帮我的代码COPY到DW里就明白了，，谢谢
<style type="text/css">
 ul li ul li{
list-style:none;
width:150px;
background:#fff000;
height:25px;
line-height:25px;
}
.tree{
width:600px;
background:#CCCCCC;
}.change{
background:#3399CC;
}

</style>
</head>
<body>
    
    
         <div class="tree">
        <ul>
<li>
    <span>电子秤</span>
 <ul>
      <li>电子健康秤</li>
          <li>人体脂肪检测仪</li>
          <li>红外人体脂肪检测仪</li>
          <li>人体脂肪水份检测仪</li>
          <li>手提秤</li>
          <li>口袋秤</li>
          <li>婴儿秤 </li>
          <li>配餐秤 </li>

</ul>


</li>


</ul>

<ul>
<li>
    <span >高清播放器</span>
 <ul>
      <li>A1系列</a></li>
          <li>B1系列</li>
          <li>C1系列</li>
</ul>


</li>
</ul>


</div>
    
   
  </body>
<script type="text/javascript">
$(function(){
$(".tree ul li ul").hide();
$(".tree ul li span").click(function(){
$(this).next().show()
})
})
</script>
<script type="text/javascript">
$(".tree ul li ul li").mouseover(function(){$(this).css("background","#ffffff")
$(this).siblings().css("background","#ffff00")
}
)
</script>