www.if4n.cn/demo/multiple-menu/ www.if4n.cn/demo/multiple-menu/index_v2.html 第二个demo，当鼠标经过"service"时，下拉菜单显示出来了；当鼠标停留在下拉菜单上，下拉菜单仍然显示没有隐藏； 第一个demo，当鼠标经过"service"时，下来菜单显示出来了；但是鼠标无法停留在下拉菜单上，鼠标刚离开"service"，下拉菜单就消失了。 请教下老兄，我的gmail: fks1945

这个问题的核心在于理解事件的冒泡机制。

将事件绑定到某个元素时，当鼠标移到这个元素的子元素时也会触发父元素的事件，这是由于事件冒泡造成的。

因此，在这个例子里，当在li上绑定了显隐事件时，当鼠标移到子菜单上时，也会触发li上的事件。

为什么第二个菜单没有问题呢，因为鼠标在离开li上时，触发隐藏事件，

而鼠标移到子菜单上时，又触发了显示事件，这两事件发生的很快，肉眼上只看到了菜单没有变化。

而第一个菜单由于使用了动画效果来显示隐藏子菜单，而动画是有个过程的，

因此当鼠标离开li上时，会触发隐藏事件，这时虽然鼠标移到子菜单上，但是由于动画效果未完成，所以会继续下去。

如何解决？

我的常用作法是使用一个setTimeout函数来延迟菜单的隐藏，而当鼠标移到子元素上时，清除setTimeout函数，

这样就不会发生隐藏动画事件，只有鼠标移开当前菜单的范围才会出现隐藏动画。

还有一个方法是修改事件函数，让鼠标离开元素时和进入元素时都只发生一次事件，这样，鼠标移到子元素上也不会产生事件。

Mootools.js里就有两个自定义事件：mouseEnter和mouseLeave实现了此项功能。

Prototype.js目前并不支持，我曾经想自己实现这两个函数，但是努力了一番，

发现不改动Prototype.js的源代码的话，实现起来很不方便，当然这也是由于个人水平有限，

不过，我有个印象是Prototype.js也会马上实现这两个自定义事件。