不多说，一看代码就清楚，这样不必一定要让两个层嵌套，两个层有一定的margin也是可以的!
<!doctype html> <html><head><title></title><style>#div1{width:50px;height:49px;background:#999;float:left;margin-right:20px;}#div2{width:150px;height:149px;background:#ccc;float:left;display:none;}</style><script type="text/javascript">window.onload = function(){var oDiv1 = document.getElementById("div1");var oDiv2 = document.getElementById("div2");var timer = null;oDiv1.onmouseover = oDiv2.onmouseover = function(){ // 两个层的mouverover 事件实际要实现的效果是一样的，就是让让菜单层显示。oDiv2.style.display = "block";clearInterval(timer);//清除定时器，不让菜单隐藏};oDiv1.onmouseout = oDiv2.onmouseout = function(){//两个层的mouseout 事件也是一样的，就是开个定时器在一段时间后让菜单隐藏，timer = setTimeout(function(){oDiv2.style.display = "none";},500);};};</script></head><body><div id="div1"></div><div id="div2"></div></body> </html>
