JS实例 悬浮显示菜单效果

在浏览网页中，我们经常会看到这种悬浮显示div的效果：

 

 现在我们就来实现一下：

思路：3个DIV，前两个包起来，一个是隐藏的DIV，鼠标移到上方div时，再用JS将隐藏的div显示出来，

html如下所示：

 

 css样式如下所示：

 

 JS实现：

 

 现在达到了这种效果：

 

 可以看到，鼠标离开红色快，移到绿色块上，绿色块就消失了，这并不是我们想要的。

将

document.getElementById("topDiv").onmouseout = hideDiv;

改为

document.getElementById("hiddenDiv").onmouseout = hideDiv;

即可解决