A simple dropdown menu with Dreamweaver

In this tutorial we create a simple dropdown menu, using Adobe Dreamweaver's builtin features.

Create a new HTML document and save it.

In the menu click Insert, Spry and choose Spry Menu Bar.

Select the type of menu you would like to create and click OK.

A fully functional menu has been created.

Let's customize it a little.

Click Spry Menu Bar (see picture) ...

... to open the properties bellow.

Here you have can modify all the menu items. You can add and delete items and sub items, rename them, move them and so on.

Let's rename them first.

Select Item 1 ...

... and enter a new name for the item.

I entered Home, being the first item in the menu.

Rename the other menu buttons as well.

Now select the Home then sub item Item 1.1 and click Remove menu Item button (see picture).

Remove the rest of the Home's sub items.

Now select the second item and click Add menu item button to add a new sub item and rename it as you wish.

Now add a couple of more sub items and rename them as well.

This is how it's suppose to look like.

Now go to CSS Styles, click All and click SpryMenuBarHorizontal.css (see picture).

Double click the ul.MenuBarHorizontal a

And change the menu settings like fonts, background, colors and so on. If you want to change the color of the menu, go to Backround, change the settings and click Apply.

You can also change the settings in following CSS styles:

ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible

Click OK when finished.

Now click the Preview/Debug in Browser button or press F12 to admire your menu in an actual Web browser.

Click Yes when asked to save ...

... and here's my new  Dropdown Menu.


Need some help or just want to drop a line or two, click the Comment.