Here are the main ideas in the code

• The boxes containing letters are called "links" the drop-down things are called "menus"
• Each link and each menu is in its own DIV
• The width of each link and menu DIV is set by the same CSS code, so they are identical.
• The menu DIVs are there all the time, but they are initially "hidden." CSS has a property called "visibility" with two possible values: "visible" and "hidden"
• Put an onMouseOver event handler on each link DIV to make the corresponding menu DIV visible.
• Put an onMouseOut event handler on each link DIV to make the corresponding menu DIV hidden. But don't make it hidden immediately, use a TimeOut to make it hidden 250 milliseconds from now.
• Put an onMouseOver event handler on the menu DIV that can cancel the hiding if the menu should remain visible.

This example is drawn entirely from CodeStyle.org's example of drop-down menus. Their code is very sophisticated, with functions that write the repetitive parts of the drop-down menus. I've tried to "unwrap" that meta-code, but I've retained their functions.

They have four functions:

• menuOver(MenuID): This function takes as an argument a text string that is the ID of the drop-down menu that should pop up. It is attached as an onMouseOver event handler on each of the main links, to pop open the associated drop-down menu.
• stayOpen(MenuID): This function keeps a menu it open if it's already open, but does nothing if there's no menu open. The idea is that when you move down from the link to the menu that has just been opened, this is called to keep it open. (Actually, menuOver does all the real work.)
• menuOut(MenuID): This function sets a timeout (a delayed function call) to hide a menu 250 milliseconds later. This allows you time to move the mouse over the drop-down menu and then the stayOpen function will be called to keep it open. If the drop-down menu were to be hidden immediately, it would be impossible to move from the link to the drop-down menu.
• hideNow(): This function hides the current drop-down menu by making it invisible.

This code could certainly be better documented. I'll do that someday. Meanwhile, don't hesitate to ask me questions. — Scott

One unfortunate thing about this technique is that we use absolute positioning to make sure that the drop-down menus don't interfere with the placement of the main text. For an alternative solution, try drop down version.

---

Debugging stuff:

| |