javascript导航栏问题

我里面写了两个div
下面是 javascript语言
function show(div) {
    document.getElementById(div).style.display = "";
}

function hide(div) {
    document.getElementById(div).style.display = "none";
}


html：
<li onmouseover="show('div1');" onmouseout="hide('div1');">洞庭碧螺春</li>


我想做到效果（1）鼠标移动到“洞庭碧螺春” 下面的div层（下文取名showdiv）显示出来（这个我已经做到了）
            （2）鼠标可以移动到showdiv（鼠标从“洞庭碧螺春”移动到showdiv的时候showdiv不消失）这点思考了我半天额。。。
            （3）鼠标从“洞庭碧螺春”或showdiv移开的时候showdiv消失。
------解决方案--------------------
可以加一个鼠标是否在子菜单的标识变量，如果在的话不隐藏，原先的隐藏处理要延迟处理，避免隐藏函数在鼠标离开一级菜单还没去到二级菜单时就执行

var focusInDetailMenu=false; //标示鼠标位置在子菜单上

function hide(div) {
setTimeout(function(){
if(!focusInDetailMenu)
    document.getElementById(div).style.display = "none";
 },500);
}

子菜单的元素的事件处理中，在鼠标进入时，将focusInDetailMenu变量置为true，鼠标离开时置为false

根据实际情况调整这个延迟的时间，500毫秒不一定适合你