These colors are not visible in the preview. I'll leave these values as they are. When you finish configuring the values in this screen, it may resemble mine, shown in Figure 10.26. Figure 10.26. Customize the dimensions, padding, spacing, and border colors on the Advanced tab. [View full size image]   With everything pretty much configured, we can now set the positioning of the pop-up menu in relation to the About Us link that's triggering its visibility. To modify the positioning, switch to the Position tab of the Show Pop-Up Menu dialog. Notice that the Position tab exposes the following functionality: Menu position: Select from one of these four options to set the position relative to the element that's triggering the pop-up menu to open. Options include Bottom Right Corner, Below and At Left Edge, Above and At Left Edge, and Top Right Edge. For our example, choose Top right Edge. Menu position: X and Y: If you aren't happy with the four positioning options just listed, you can manually enter the X and Y coordinates in pixels to set a pinpoint accurate location for your menu in the browser window. The values listed are the default values of the menu position options you selected above. Hide menu on onMouseOut event: Enable this check box to ensure that the menu disappears when the user's cursor rolls out of the element that caused the pop-up menu to appear. Offhand, I can't think of a reason why you wouldn't want to enable this option. When you finish, your screen might resemble mine, shown in Figure 10.27. Figure 10.27. Use the Position tab to set the positioning of the pop-up menu in relation to its triggering element. [View full size image]   Finally, click OK to create the pop-up menu. Save your work and test the results in the browser by choosing the Preview in Browser option from the Document bar (or by pressing F12). As you can see in Figure 10.28, the pop-up menu appears when I roll over the About Us hyperlink. Figure 10.28. The pop-up menu appears when I roll over the hyperlink. [View full size image]   NOTE The code involved for generating this functionality is so massive (764 lines of code) that Dreamweaver creates a separate mm_menu.js file and places it in the root of your defined site. It then links the .js file into the HTML page similar to the way external CSS files are linked in. Also notice an arrow.gif file in the root of the project folder. This is the image used to indicate the existence of the Management submenu in the pop-up menu.   Show-Hide Layers As you'll see in Chapter 11, "Layers in Dreamweaver," you can use the Show-Hide Layers behavior as a way to show a layer when a user rolls over an element and to hide a layer when a user rolls out of an element. The Show Pop-Up Menu behavior you learned about in the previous section is based on this premise. The same pop-up menu we built using the Show Pop-Up Menu dialog could have been built with a bit more effort using some formatting techniques in conjunction with the Show-Hide Layers behavior. Swap Image and Swap Image Restore Similar to the Rollover Image option available from the Image Objects menu in the Insert menu, the Swap Image behavior allows you to quickly construct a