Using DIV Tags and Hover event to Create Expandable Menus

I have a page with a header div tag and a body div tag. The header div tag has a link that expands when hovered over to present user a list of radio buttons. The body is a table of records dynamically populated from radio button choice. Every thing was working good until I decided that a couple of the radio buttons needed menus them selves. What is happening is I click on a radio button that has a sub menu, the div tag expans to display the menus. Now suppose I decide I needed to select another main menu radio button. This action is designed to colapse the expanded sub menu already open, then expand the menu of the new selection. However, when the open menu colapses it leaves the cursor outside of the div tag causing the out of scope hover function to fire and colapses the div tag altogether.

What can I do for the design to eliminate this and still have expandable menus.

I sue hope this ranting makes sense.