Note that to help illustrate the issue discussed here, the animation duration for these menus has been set to 1 second.

For the first experiment position the mouse cursor just beneath menu "Item 3" above. Next, without hovering on Item 3, move the mouse quickly through Item 3 to a position above Item 3 without stopping to hover on Item 3. This is what might happen if someone visiting your site was moving the cursor rapidly from one section of the page to another with no intention of triggering a submenu.

No matter how quickly you move the cursor through Item 3, the submenu is triggered. Irritating, isn't it?


  1. Hover on Item 3 above to trigger its submenu.
  2. Then hover on Item 3.1 to trigger its submenu.
  3. Now, without ever leaving Items 3.1 to 3.4, move the cursor quickly from 3.1 to 3.4 and back. With the animation duration set to 1 second you don't have to move too quickly. Do it and see what happens.
  4. Next, move from 3.1 to 3.4 and back several times. Be careful to never leave the four submenu items, and to finally stop on one of them.

In both situation 3 and 4, "enter" events were triggered instantly when the cursor entered a submenu element, so "show" and "hide" animations were queued. When you moved rapidly over a series of menus, they were all queued up, and you had to wait for them to finish.

Irritating, isn't it?

Return to the tutorial page and let's set up a hover delay to prevent this.