Javascript Pop-Up Menu

1. Save this image to your PC, or if you want to use any other image of your own, please go ahead.

2. Create a new page and save it as menu.html. Place the image you have downloaded above inside your menu.html Then go to Window > Behaviors (Shift+F3) to open the Behaviors panel. (If it is not open).

3. Now select your image and click on the + sign on the Behaviors panel. From the popup menu choose Show Pop-Up Menu

4. Now type the first menu item in the Text field, I entered Company. Then enter the destination url for the menu item. This is the url where user will be redirected when he chooses this menu item. I have entered as company.html

Then click + to enter another menu item

5. Add more menu items as shown below. We need more menu items to put them under the sub-category

Now as you see Web Design & Web Hosting could be placed under Services.

6. Select the Web Design from the menu and click on the Indent Item to put it under Services

Now put Web Hosting under Services too.

7. Now go to next step by selecting Appearance. Choose the FONT, FONT SIZE, and MENU COLORS as you like fo your menu.

8. Click on Advanced if you want to customize your menu more. For example I have set a fixed cell width, which is 150pixels. And also the Cell Padding to 4, as well as Text Indent to 5.

9. Finally Choose Position for the positioning of the menu. I have selected the second one which will display the menu under the image. You can explicitly define the position by entering X: and Y: values directly in their fields. And tick the Hide Menu on onMouseOut Event, otherwise your menu will stay after you remove your mouse from the menu.

Click on OK, and save your menu.html. View it in your browser (F12 for IE).