this.parentNode.className = thisMenuName; this.parentNode.onmouseout = toggleDivOff; this.parentNode.onmouseover = toggleDivOn;
Once we've set the menu to display, we have to figure out how to hide it again. The secret to a pull-down menu is that you don't want it to close when you move the mouse off the triggering link; you want it to close when you move the mouse off the entire
div . That is, if you're anywhere on the menu, you want it to stay open. Here, we assign a
class to the parent of the current link (that's the
div around the link), and then we assign
onmouseover and
onmouseout handlers to the
div . These trigger
toggleDivOn() and
toggleDivOff() , which will handle the
div from now on.
Here's the trick: if we got here, then by definition, the cursor is inside the
div . And consequently, just setting the
onmouseover causes
toggleDivOn() to be immediately triggered.