javascript导航栏问题

Question

我里面写了两个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消失。

Answer 1

可以加一个鼠标是否在子菜单的标识变量，如果在的话不隐藏，原先的隐藏处理要延迟处理，避免隐藏函数在鼠标离开一级菜单还没去到二级菜单时就执行var focusInDetailMenu=false; //标示鼠标位置在子菜单上function hide(div) {
setTimeout(function(){
if(!focusInDetailMenu)
    document.getElementById(div).style.display = "none";
 },500);
}子菜单的元素的事件处理中，在鼠标进入时，将focusInDetailMenu变量置为true，鼠标离开时置为false根据实际情况调整这个延迟的时间，500毫秒不一定适合你

Answer 2

<div class="all">
<碧螺春>
<showDiv>
</div>让鼠标移到all的时候showDiv,移出的时候hiddenDiv

Answer 3

var timer;
function show(div) {
if(timer){clearTimeout(timer);}
    document.getElementById(div).style.display = "";
}function hide(div) {
    timer=setTimeout(function(){document.getElementById(div).style.display = "none";},500);
}div1 也设置： onmouseover="show('div1');" onmouseout="hide('div1');"

Answer 4

<div class="all">
<碧螺春>
<showDiv>
</div>
html这样写。