Hover delay when mouse move cross

Question

I have a navigation menu and I want when mouse moves across, then navigation will be delayed 200 ms. How can I do that?

Example: http://www.amazon.com/

Amazon has left navigation (Shop by department) when the mouse moves across navigation waits.

<ul id="nav">
<li><a href="#">Menu 1</a>
    <ul>
        <li>Sub Menu 1</li>
        <li>Sub Menu 2</li>
    </ul>
</li>
<li><a href="#">Menu 2</a>
    <ul>
        <li>Sub Menu 3</li>
        <li>Sub Menu 4</li>
    </ul>
</li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
</ul>

For example; If mouse on "Menu 1" and cross move to "Sub Menu 1", "Menu 1" should not be closed. Else "Menu 1" should be close.

Answer 1

http://cherne.net/brian/resources/jquery.hoverIntent.html is the script you are looking for.

Simply said, it will check whether you went by fast or slow with your mouse.