Now try the same experiments, but with an appropriate hover delay implemented.

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.

At this point, if you move the cursor through Item 3, and it remains on Item 3 for a period of time less than the delay, nothing happens.


  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.

Now, no submenus are triggered until you stop and hover long enough on a single menu item.