JavaScript 动画下拉菜单

Question

我正在尝试创建一个下拉菜单作为主菜单的子菜单。子菜单只是一个包含项目/链接的 div 元素。单击主菜单项时，子菜单会下拉并停留在那里。这很容易，但我希望如果光标离开子菜单，子菜单会向上滑动。换句话说，一个简单的“鼠标移出”事件。但是，似乎当光标进入子菜单中的一项时，会触发“mouseout”事件。如果您考虑一下，这就是您想要的，因为光标确实离开了子菜单元素，即使它没有离开它的边界。但是，这确实会带来问题，因为我只希望在光标移出子菜单元素的边界时触发事件。

真正归结为，将一个 div 放在另一个 div 中，如下所示:

----------------------------
|          DIV-1           |
|                          |
|      -------------       |
|      |           |       |
|      |   DIV-2   |       |   AREA OUTSIDE DIV-1
|      |           |       |
|      |           |       |
|      |           |       |
|      -------------       |
|                          |
|                          |
----------------------------

现在，有两件事可能会导致 DIV-1 触发“mouseout”事件:

1. 光标从 DIV-1 的边界内移动到边界外的区域
2. 光标从DIV-1的边界内移动到DIV-2的区域

我的目标是能够将这两种情况彼此区分开来，但我一直无法弄清楚如何区分。

有没有人有解决这个问题的好方法？这似乎是一个很常见的功能，所以一定有人解决了它。

Answer 1

http://users.tpg.com.au/j_birch/plugins/superfish/ <-- 节省你自己的时间，他已经为你拔掉了他的头发(也许不是字面上的，虽然，不知道)