Collapsing drop-down nav automatically when mouse exits div area

I put together a simple drop-down navigation that expands when you hover over a link.

When hovering over a link an absolute positioned div will expand, revealing the sub-navigation. My problem is that this div doesn't collapse automatically when the mouse leaves the navigation area, and that's what I need to happen.

I've added onMouseover commands to the other links in the navigation that will collapse the div when activated, but the functionality that I really need is for the drop-down div to collapse when the mouse leaves开发者_Python百科 the div area.

I greatly appreciate any help with this.

------EDIT-------

Thanks for the help @Tuanderful. I solved this problem in an inelegant (yet effective) fashion.

I simply added the onmouseover event with a close trigger to the divs immediately below and above the navigation. This way when a user's cursor leaves the drop-down navigation, the trigger fires and the drop-down closes automatically.

I agree that a pure CSS approach would have been ideal, but due to some other complications with this navigation I had to go with the Javascript solution.

Instead of making #subnav1 a sibling of #nav, you can try make div#subnav1 a nested list; your nav structure would look like:

<ul>
    <li>About</li>
    <li>Products
        <ul>
            <li>Booster</li>
            ....
        </ul>
    </li>
</ul>

Then you can use CSS (instead of javascript) to control the hiding and showing of the sub-nav. This can be done with the :hover pseudo-selector.

The approach is to initially hide the submenu with

ul ul { display: none }

When the user mouse's over the main menu's items, use the :hover selector to display the sub-menu

li:hover ul { display: block }

If you decide to change the HTML structure you may need to continue to refine your CSS/images appropriately for everything to fall into place.

A good resource that goes into this approach in further detail can be found at A List Apart: Horizontal DropDowns. An even more robust example (and slightly different approach) can be found at this CSS Wizardry article on Creating a Pure CSS Dropdown Menu