Creating & Customizing Drop Down List in Dreamweaver 8 Using CSS

Are you tired of seeing the plain drop down list on your web page? Well thanks to CSS you can now spice them up. In this guide I will show you how to create the drop down list and how to customize the colors of them. You can easily create the drop down list and customize it using dreamweaver 8. First I will walk you through creating the drop down list. So let’s begin.

Creating Your Drop Down List

First thing you need to do is open your Dreamweaver Program.

Step 1 – Create a new html file.

Step 2 – Click File > Save As and save it as something. In my example I saved mine as dropdown.html

Step 3 – Place your mouse anywhere on your document. Then Click Insert > Form > List/Menu.

Step 4 – The “Input Tag Accessibility Attributes” Box will pop up. Just click OK.

Step 5 – Now the Form Tag box will pop up, click yes.

Step 6 – Click on the little box in your Dreamweaver document. Look in the properties panel and you’ll see List/Menu, Type, List Values, etc. Click on List Values. (See Image 1)

Step 7 – The List Values Dialog box will pop up. This is where you list the items that you want to appear in the drop down box. List the name of the item under the Item Label and type the link to that item under the Value. To add more items click the + button. Once you have entered all of your items, click OK. (See Image 2)

We have created our Drop Down List. Now let’s move on to making it look better.

Customizing the Look Of The Drop Down List

Step 1 – Right Click on your document and click CSS Styles > New.

Step 2 – The “New CSS Rule” Dialog will pop up. Enter the following:
Selector Type: Class
Name: .form
Define In: This Document Only
Click OK

Step 2 – A new dialog box will appear. Under Category you will see that Type is highlighted. On the right you need to fill in the font, font color, font size, etc. Once you are finished with that click Background.

Step 3 – Under Background Category, choose the color of your background on the right. No need to mess with any of the other Fields.

Step 4 – Move to Border. Select the style of border you want. I would go with Solid. Then choose the width, 1 pixel is a nice size. Choose the color of your border.

Step 5 – Click OK.

Step 7 – Click on the form box to highlight it. Look in the Properties window and find where it says Class. Drop that box down and select form.

Step 8 – Press F12 on your keyboard to preview it.

Now you should see your customized form. You can play around with the CSS to get the colors the way that you want them. See image 3 for the final results. In Dreamweaver 8 you can customize the CSS in the panel on the right under CSS > CSS Styles.