请问如何解决这个移入移出的问题

[qingwadaxia_1]

<style>
*{margin:0;padding:0; border:0;}
#cc{width:100px;height:60px;background:#f00;display:none;}
</style>


<div id="aa">主菜单</div>
<div id="cc">
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
<li><a href="#">子菜单3</a></li>
</ul>
</div>

<script>
var aa = document.getElementById("aa");
var cc = document.getElementById("cc");
aa.onmouseover = function(){
cc.style.display="block";
}
aa.onmouseout = function(){
cc.style.display="none";
}
</script>

鼠标移到主菜单显示三个子菜单， 但是一移到子菜单上就消失了， 想要的效果是 离开主菜单到子菜单上 还是会显示， 只有离开主菜单和三个子菜单 才会隐藏 我知道 可以给他们包裹一个大div 解决 但是现在的情况是不能包裹div 请问如何解决这个问题

[天际的海浪]

var aa = document.getElementById("aa");
var cc = document.getElementById("cc");
var timer;
aa.onmouseover = cc.onmouseover = function(){
	clearTimeout(timer);
	cc.style.display="block";
}
aa.onmouseout = cc.onmouseout = function(){
	timer = setTimeout(function(){
		cc.style.display="none";
	}, 200);
}

[qingwadaxia_1]

引用 1 楼 jslang 的回复:

var aa = document.getElementById("aa");
var cc = document.getElementById("cc");
var timer;
aa.onmouseover = cc.onmouseover = function(){
	clearTimeout(timer);
	cc.style.display="block";
}
aa.onmouseout = cc.onmouseout = function(){
	timer = setTimeout(function(){
		cc.style.display="none";
	}, 200);
}

大神 请问是不是还有一个冒泡之类的解决方法

[qingwadaxia_1]

引用 1 楼 jslang 的回复:

var aa = document.getElementById("aa");
var cc = document.getElementById("cc");
var timer;
aa.onmouseover = cc.onmouseover = function(){
	clearTimeout(timer);
	cc.style.display="block";
}
aa.onmouseout = cc.onmouseout = function(){
	timer = setTimeout(function(){
		cc.style.display="none";
	}, 200);
}

这个适用上面写的确实可以 但是我发现在下拉菜单比较多的板块的时候 移动其它地方的时候 时间还是不够一样 会移到一半就消失了

[天际的海浪]

引用 2 楼 qingwadaxia_1 的回复:

[quote=引用 1 楼 jslang 的回复:]

var aa = document.getElementById("aa");
var cc = document.getElementById("cc");
var timer;
aa.onmouseover = cc.onmouseover = function(){
	clearTimeout(timer);
	cc.style.display="block";
}
aa.onmouseout = cc.onmouseout = function(){
	timer = setTimeout(function(){
		cc.style.display="none";
	}, 200);
}

大神 请问是不是还有一个冒泡之类的解决方法[/quote] 你两个div是并列的，不是父子关系，没有事件冒泡

[天际的海浪]

引用 3 楼 qingwadaxia_1 的回复:

[quote=引用 1 楼 jslang 的回复:]

var aa = document.getElementById("aa");
var cc = document.getElementById("cc");
var timer;
aa.onmouseover = cc.onmouseover = function(){
	clearTimeout(timer);
	cc.style.display="block";
}
aa.onmouseout = cc.onmouseout = function(){
	timer = setTimeout(function(){
		cc.style.display="none";
	}, 200);
}

这个适用上面写的确实可以 但是我发现在下拉菜单比较多的板块的时候 移动其它地方的时候 时间还是不够一样 会移到一半就消失了[/quote] 那你把定时器延时设置长一些

[qingwadaxia_1]

引用 5 楼 jslang 的回复:

[quote=引用 3 楼 qingwadaxia_1 的回复:] [quote=引用 1 楼 jslang 的回复:]

var aa = document.getElementById("aa");
var cc = document.getElementById("cc");
var timer;
aa.onmouseover = cc.onmouseover = function(){
	clearTimeout(timer);
	cc.style.display="block";
}
aa.onmouseout = cc.onmouseout = function(){
	timer = setTimeout(function(){
		cc.style.display="none";
	}, 200);
}

这个适用上面写的确实可以 但是我发现在下拉菜单比较多的板块的时候 移动其它地方的时候 时间还是不够一样 会移到一半就消失了[/quote] 那你把定时器延时设置长一些[/quote]感谢！