javascript 怎么实现鼠标移动到栏目上右侧显示相应的内容。

javascript 怎么实现鼠标移动到栏目上右侧显示相应的内容这是我的代码
js 效果实现问题 如淘宝首页所示 左侧 列表 鼠标移入 右侧显示相应的 更多宝贝 但鼠标移到右侧更多宝贝页面时 页面却隐藏了
我的代码
//获取左侧列表
var list=document.getElementById("nav_list").getElementsByTagName("li");
//获取右侧更多内容
var list_more=document.getElementById("list_more_id").getElementsByClassName("dis_list");
var cc=""; //表示当前对象
for(var i=0;i<list.length;i++){
list[i].onmouseover=function(){
for(var j=0;j<list.length;j++){
list[j].index=j;
list_more[j].style.display="none";
}
list_more[this.index].style.display="block";
cc=this.index;
}
list[i].onmouseout=function(){
list_more[cc].style.display="none";
}
这代码存在一个bug 就是当鼠标移到右侧更多的内容的时 ，右侧内容隐藏；怎么解决？？

---

给个建议的解决办法: 是否可以把右边的list放在左侧栏目的div下

<div id="nav_list">
    <div id="左侧栏目">
        <div id="右侧更多"></div>
    </div>
</div>

这样就可以避免mouseout触display:none了, 因为光标即使在右侧更多上,也其实mouseon在左侧栏目.