Select Insert -> Navigation Bar. The Navigation Bar Templates Dialog will popup. Click the button Cancel to close it.
Click on the first "Menu item" and click this button several times. This will create several sub-menu items.
Select the second item "Item2" and click this button several times. This will create nested sub-menu items. We use these items to preview the effects of drop down menu.
Click on the "Style tab" then "Dimensions tab". Set the values as shown on the image below.
The set the height of the navigation bar to the height of the image used. Set the line height to the height of the navigation bar will center the text vertically. We do not set a fixed width as we want each item to adjust to the length of the text and each with 30pixels on both sides of the text.
Select "Sub-menu items" from the Item type and set the values as shown on the image.
Here we use fixed width for sub-menu. The text will align on the left.
Click on the "Text tab" and set the values as shown on the image. Here we set the styles of the text on each items.
Select "Sub-menu items" from the item type and set the values as shown below.
Click on the "Background tab". Select "Hover" for the State as there are nothing to set for normal state. Set the values as shown on the image. Here we will use the images created in previous steps.
Select "Second image" for the Location. Set the values as shown on the image.
Select "Active" for the State and "First image" for the Location. Set the values as shown on the image. For this navigation bar, both active state and hover state will show the same set of images.
Select the "Second image" for the Location. Set the values as shown on the image below.
Select the "Sub-menu items" for Item type and "Normal" for State. Set the values as shown on the image below.
Select "Hover" from the State. Set the values as shown on the image below.
Select "Nested Sub-menu Indicator" from Item type. Select "Normal" for the State and "First image" for Location. Set the values as shown on the images. This will use the white arrow image we have created in previous step to show that there are sub-menu items.
Select "Navigation bar background" from the Item type. Set the values as shown on the image below.
Click on the "Border tab". Select "Sub-menu items" for the Item type and "Normal" for the State. Set the values as shown on the images below. We leave out the bottom border deliberately as it is only needed for the last sub-menu item.
Select "Sub-menu last item" from the Item type. set the values as shown on the image below.
Click on the "Sub-menu Effects tab". Set the values as shown on the image below.
Click on the Refresh button on the top right corner. You can test out the results in the preview pane.