How to Add a Drop Down Box in Dreamweaver


This wikiHow teaches you how to use Adobe Dreamweaver to create a drop-down box for a webpage. Drop-down boxes are menus which "drop down" when an item on your webpage is clicked, presenting more options in the process.

Part 1

 on How to Add a Drop Down Box in Dreamweaver

1
Double-click the project's file to do so. If you want to create a new Dreamweaver project, you'll instead open Dreamweaver, click File, click New, and follow any on-screen prompts.

 on How to Add a Drop Down Box in Dreamweaver

2
In order to create a drop-down menu, you must have at least one bullet-point item. You can create a bullet point by turning off CSS (click the View menu item, select Style Rendering, and click Display Styles if it's checked), clicking the location where you want to add the point, clicking the bullet point icon at the bottom of the window, and typing in the point's name. You should then turn back on CSS before proceeding. The point's name here will serve as your drop-down menu's activator (e.g., the button over which one hovers or taps to open the drop-down menu). Skip this step if you already have a list item that you want to convert into a drop-down menu.

 on How to Add a Drop Down Box in Dreamweaver

3
Click the Code tab and make sure you're on the Source Code setting, then scroll down to your ordered list's code (it will be between a "<ul>" tag and a "</ul>" tag) and look for the "<div id="name">" tag above the top "<ul>" tag. The word in quotations is your list's name.[1] If you don't see a name, insert the tag <div id="name"> (where name refers to your preferred name of the list) directly above the <ul> tag.

 on How to Add a Drop Down Box in Dreamweaver

4
Make sure you're in the right place by clicking the Design tab and then clicking the CSS Designer tab in the upper-right corner of the window, then do the following: Click + to the right of the "Selectors" heading. Type in #name ul where "name" is your list's name. Press ↵ Enter twice. Scroll down and click list-style-type in the pane at the bottom of the CSS Designer tab. Click none in the resulting pop-up menu.

 on How to Add a Drop Down Box in Dreamweaver

5
To do so: Click + to the right of the "Selectors" heading. Type in #name li where "name" is your list's name. Find the "float" heading in the pane at the bottom of the CSS Designer tab. Click the Left button immediately to the right of the "float" heading.

 on How to Add a Drop Down Box in Dreamweaver

6
Click the + button to the right of "Selectors", then type in #name a (where "name" is your list's name) and press ↵ Enter twice.

 on How to Add a Drop Down Box in Dreamweaver

7
Select the #name a item if necessary, then click the box-shaped "Background color" tab at the top of the CSS Designer pane, select the background-color option, and select a background color to use. This is the color your drop-down list's items will use.

 on How to Add a Drop Down Box in Dreamweaver

8
This format ensures that when someone goes to click or tap on an item in the list, they can open it by selecting slightly above or below it instead of having to select precisely the text: Make sure your #name a item is selected in the CSS Designer tab. Scroll down to the "display" heading in the pane. Click the far-right side of the "display" heading, then click block in the resulting menu.

 on How to Add a Drop Down Box in Dreamweaver

9
If you notice that your list items are jammed up against each other, you can place some space in between them by doing the following: Make sure your #name a item is selected in the CSS Designer tab. Scroll down to the "padding" heading in the pane. Change the top and bottom "px" text fields to read at least 5. Change the left and right "px" text fields to read at least 10.

 on How to Add a Drop Down Box in Dreamweaver

10
This is the color that will appear when you hover your mouse cursor over an item in the drop-down menu: Click + to the right of the "Selectors" heading. Type in #nave a:hover (where "name" is your list's name) and press ↵ Enter twice. Click the "Background color" tab. Select background-color and then select a lighter color than you used for the background color.

 on How to Add a Drop Down Box in Dreamweaver

11
Click the View menu item, select Style Rendering, and click the Display Styles option in the pop-out window. If the Display Styles option is greyed out, click anywhere in your Dreamweaver document and try again.

 on How to Add a Drop Down Box in Dreamweaver

12
You can do this by adding sub-points below the bullet point that you want to use as the drop-down menu's button: Click to the right of the list item you want to turn into a drop-down menu, then press ↵ Enter. Press Tab ↹. Type in the name of your first drop-down menu item, then press ↵ Enter. Type in the name of the next drop-down menu, then press ↵ Enter and repeat as needed.

 on How to Add a Drop Down Box in Dreamweaver

13
To do so: Click + next to "Selectors", then type in #name ul ul and press ↵ Enter twice. Scroll down and click display, then click none in the pop-up menu. Find and click position, then click absolute in the pop-up menu.

 on How to Add a Drop Down Box in Dreamweaver

14
You'll have to add yet another selector to do this: Click + next to "Selectors", then type in #name ul li:hover > ul and press ↵ Enter twice. Find and click display, then click block in the resulting pop-up menu.

 on How to Add a Drop Down Box in Dreamweaver

15
By default, the drop-down menu contents will display in a horizontal bar, but you can force them into a vertical column by doing the following: Click + next to "Selectors", then type in #name ul ul li and press ↵ Enter twice. Find the "float" heading. Click the "none" (\) option to the right of the "float" heading.

 on How to Add a Drop Down Box in Dreamweaver

16
Press Ctrl+S (Windows) or ⌘ Command+S (Mac) to do so. If you created a new Dreamweaver file for this project, you'll need to enter a name, select a save location, and click Save in order to save your file.