Summary:

OK. Here is what we did:

1. Placed the menus on the page in a centered table, and included spacers on the sides so there is always some space no matter how small the page gets.
2. Placed FBs that were positioned at 0,0 with a width of 100%.
3. In the FBs we placed a centered table that contained the submenu in the middle column and spacers around the submenu to match the total width of the table containing the main menu.
4. Added an Action Group to the page that could be called by other actions, and it hides all the submenus.
5. Gave an action to each main menu button's Mouse Enter event to show the correct submenu
6. Gave an action to the Mouse Enter event of each transparent gif in the submenu tables that calls the Action Group and hides the submenus.
7. Added a little javascript to the head section of the page, and copied the CSS for the submenu FBs into it, changing them to 250% wide (only in the javascript copy).
8. Added links and rollovers to each submenu button.

The most important part of this whole thing is to design the tables in the submenu FBs to match the width of the tables in the main page. Otherwise the submenus will not stay in the right place as the browser window gets smaller.

This was a simple type of menu. A more typical page is going to have a lot of other things in it, like a logo, or other graphics above or around the menu. The next page describes some of these variations and how to change the method of making this menu to match them.

Variations