Learn how to create this menu in Adobe GoLive 5 in an online step by step tutorial.

Download a PDF of the tutorial.

Download the sample images:

Back to the Tips Page

Addendum: Making the sub-menu disappear...

Many people have asked how to get the sub-menu to hide on mouse out. Here's a trick to accomplish that. Create a transparent GIF whose dimensions are a little bit larger than the area of your submenus. (Actually, you can use a 1 x 1 Pixel transparent GIF and stretch its dimensions in the Image Inspector.)

Put the image into a Floating Box of its own, and set its depth to a lower number than the Floating Boxes containing your sub-menus. Lower depth is lower in the stacking order, so the transparent GIF will be underneath the other floating boxes.

Now add an Action to the transparent GIF that calls an Action Group set to hide ALL of the submenu layers. As the user mouses out of the sub-menu area, he will encounter the transparent GIF. That will trigger the hide all Action.

There are no hard and fast rules for creating menus or for using Actions. It's a matter of determining what you want to do, and then setting about finding a way to do it. Sometimes in Web design, that requires pretty creative thinking! Hope this helps.