Creating a Drop-Down Menu in Adobe Dreamweaver


In our Adobe Dreamweaver CC training course, expert author Andy Anderson takes you through the process of creating a custom drop-down menu for your website. Here, we’ll outline the key steps you’ll need to follow in order to accomplish this task.

The first thing you’ll need to do is download Ajatix¬†from Adobe Exchange (it’s free!) – this is what is needed to create your CSS drop-down menu. Next, go to File>New and choose a blank HTML document. The Ajatix download should appear in the top tab, and contains one item: Advanced CSS Drop Down Menu Light (Light=free version). **Important: if you don’t save the document and give it a name BEFORE you click that button, then Dreamweaver will crash and you’ll have to start all over again.


When you click that button, select “Create a new menu” and click ok – this is where the fun begins! With the light version, you are given a lot of templates, but keep in mind that the premium ones are not available unless you purchase it. Once you choose a template you like and click apply, you will get to add the names of your buttons in the menu editor. If you’d like to make one (or more) of these buttons into a drop-down menu, simply select the name you want to make a drop-down menu and click the right facing arrow button.


The next step is to add a link to all of your button names (just the first page). If you go into the style editor, you’ll see that most of the options are grayed out, meaning they aren’t available in the light version. Once you’re finished, you can preview your menu in the bottom area of the menu editor. Once you’re happy with what you created, click ok. Make sure you save this because it’s going to create the CSS to make the menu work. Then click on the live button at the top of the menu to see it in action.


Tune in to the video below if you’d like to Andy teach the entire lesson from his Adobe Dreamweaver CC training course:




Save $50 when you sign up for an annual Learning Library account Learn More