Traditionally, multi-level dropdown menu navigation has been done in JavaScript. These kinds of menus can be very confusing to code, and more confusing to go back and edit later. Do it better and more beautifully with CSS and Dreamweaver CS4.

For this tutorial, we’ll be making a horizontal navigation bar for a zoo. It will have dropdowns and a couple of items will have flyouts to the right. We’ll simplify it the navigation by pretending our zoo has only four animals. I guess we can’t expect too many paid admissions. Luckily, after you’ve completed this tutorial you should be able to adapt this technique for any site.

Preview our menu here. ^[2]

 

Step One: Plan Your Nav

It’s really important to get organized before you code. The BluLob Zoo needs three first-level navigation items: Home, Visit Us and Animals. Visit Us will need three second-level items: Hours & Pricing, Maps, and Calendar. Animals will have two second level items – Birds and Beast, and each of these will feature two animals at a third level (Kookaburra ^[3] and Hammerkop ^[4] for Birds; Wolverine ^[5] and Wombat ^[6] for Beasts).

It will help to create an outline of how we want our navigation organized. This can be done on the computer, but I often find myself sketching things up on Post-It notes or sheets of scratch paper. Here’s my sketch:

An alternate outline would look like this:

• Home
• Visit Us
  • Hours & Pricing
  • Maps
  • Calendar
• Animals
  • Birds
    • Kookaburra
    • Hammerkop
  • Beasts
    • Wolverine
    • Wombat

Both of these outlines together will help us visualize how our navigation will be built. Let’s go!

 

Step Two: Build the HTML

Our navigation bar has two components: the HTML on the web page, and the CSS styling which will be in an external CSS style sheet that can control every page on our site. We’ll start with the basic content in HTML without any styling. Take a look at that second outline above. We need to recreate that in Dreamweaver. Remember to save your file frequently!

1. Create a new HTML page in Dreamweaver (File > New). Then select Blank Page and HTML. Choose (none) for the layout, and set XHTML 1.0 Transitional as the Doctype. Click Create.

2. Save the file as menu.html (File > Save As). Click on the Design button in the Document Toolbar ^[7].

3. Navigation is really just a type of list, so we’ll make our menu a list. In the Property Inspector, click on the Unordered List icon. If you cannot see the Property Inspector, go to Window > Properties.

4. Type out your first level navigation: Home, Visit Us and Animals. Press Enter (Mac: Return) after each item. Don’t worry that we appear to be going down rather than across. We will finesse that in the CSS.

5. Click with your cursor just after the s in Visit Us. Press Enter/Return and then press Tab. The list should indent and the bullet type should change. This will be for our second-level navigation.

6. Type in Hours & Pricing and press Enter/Return. Type in Maps and press Enter/Return. Type in Calendar.

7. Click after the empty bullet at the bottom of the list and press Tab. Type in Birds and press Enter/Return. Type in Beasts.

8. Time for our third-level items. Click after the s in Birds. Press Enter/Return and type Kookaburra. Press Enter/Return and type Hammerkop.

9. Repeat for beasts: type in Wolverine and Wombat.

10. Finally, we need to set up each item as a link. We don’t have pages to actually link to yet, so we’ll put in a pound sign (#) which is a sort of link placeholder. Select the word Home. In the Property Inspector, type # in the Link box and press Tab.

11. Do the same for all the other navigational items.

All of our basic HTML scripting is done. Now we need to tell Dreamweaver what CSS classes and IDs to use in the HTML. And we need to set up all of our style rules in an external CSS file.

 

Next: Step Three: Start Building the CSS ^[8]

Step Three: Start Building the CSS

Our menu will belong to CSS class called dropdown. The CSS file will do different things with this dropdown class, depending on whether we are inside the main list, or some secondary or tertiary item. Here’s a quick run down of the components we will style (ul means unordered list and li means list item):

• ul.dropdown will style the main list (the horizontal bar itself)
• ul.dropdown li will style an individual within the main list (Home, Visit Us or Animals)
• ul.dropdown ul will style the vertical column that drops down below Visit Us and Animals.
• ul.dropdown ul li will style items with that vertical column (e.g. Birds and Beasts)
• ul.dropdown ul ul will style the menus that pop out to the right of the vertical column (e.g. Kookaburra and Hammerkop for Birds)

Let’s dive in with the first one!

1. Open the CSS Styles panel (Window > CSS Styles) and click on the New CSS Style icon at the bottom of the panel.

2. In the New CSS Rule box, use these setting and click OK:
   1. Selector Type: Compound (based on your selection)
   2. Selector Name: ul.dropdown
   3. Rule Definition: (New Style Sheet File)

3. Save the file as menu.css in the same folder as menu.html.
4. In the “CSS Rule definition for ul.dropdown” box, use these settings and click OK twice:

Category	Subcategory	Setting	Value
Background		Background color	#cccccc
Box		Float	left
	Padding (CHECK same for all)	Top	0
	Margin (CHECK same for all)	Top	0
List		List-style-type	none
		List-style-image	none
Positioning		Position	relative
		Z-index	597

3. To see what we’ve done so far, click anywhere in our list on menu.html.
4. In the Tag Selector, click on the first ul from the left. This will select our entire list.
5. In the Property Inspector, click on the arrow for Class.
6. Select the new style we created: dropdown

Here’s what my menu looks like now:

7. Click on the New CSS Rule icon again.
8. In the New CSS Rule box, use these settings and click OK:
   1. Selector Type: Compound (based on your selection)
   2. Selector Name: ul.dropdown a:link
   3. Rule Definition: menu.css

9. In the “CSS Rule definition for ul.dropdown a:link” box, use these settings and click OK twice:

Category	Setting	Value
Type	Font-family	Georgia, "Times New Roman", Times, serif
	Color	#4a53a2
	Text-decoration	none

10. Repeat the settings above for a new compound CSS style called ul.dropdown a:visited

Here’s the menu with the link (and visited link) styles we created:

11. Repeat steps above for a new compound CSS style called ul.dropdown a:hover, except with black color:

Category	Setting	Value
Type	Font-family	Georgia, "Times New Roman", Times, serif
	Color	#000000
	Text-decoration	none

To see the effect of the hover setting, save the menu.html file and press F12 to preview the file in a browser. If you get a dialog box asking you to save menu.html, say Yes. If you get a dialog box warning you that some pages have been modified but not saved, that means the new menu.css file; click Yes.

Here, I am hovering over the word Birds in the browser, which changes color to black.

 

Next: Step Four: CSS Menu Magic ^[9]

Step Four: CSS Menu Magic

Now we’ll begin popping that menu out to the right and building the dropdowns.

1. Add a new Compound Style in menu.css with the name ul.dropdown ul
2. Use these settings in the CSS Rule definition box:

Category	Subcategory	Setting	Value
Background		Background color	#cccccc
Box		Width	150px
	Padding (CHECK same for all)	Top	0
	Margin (CHECK same for all)	Top	0
List		List-style-type	none
		List-style-image	none
Positioning		Position	absolute
		Visibilty	hidden
		Width	150px
		Z-index	598
	Placement	Top	100%
		Left	0

Make sure you put % for the Top placement, not px!

Here’s what the ul.dropdown ul style rule did to the second level items under Visit Us and Animals:

• removed bullets and margins from all menu list items (not just first level)
• hid 3rd-level buttons until 2nd level buttons are activated (which won’t be apparent yet)
• set the background color for 2nd-level buttons that have fly-outs (Birds and Beasts)
• gave a consistent width of 150px to the 2nd and 3rd level buttons

Now if you view the page in a browser, the menu has collapsed so that only the first level appears.

3. Add a new Compound Style in menu.css with the name ul.dropdown li
4. Use these settings in the CSS Rule definition box:

Category	Subcategory	Setting	Value
Type		Line-height	1.3em
Block		Vertical-align	middle
Box		Float	left
	Padding (UNCHECK same for all)	Top	7px
		Right	30px
		Bottom	7px
		Left	10px
	Margin (CHECK same for all)	Top	0
Border (UNCHECK same for all in all 3 columns)	Right	Style	solid
		Width	1 pixel
		Color	#999999
List		List-style-type	none
		List-style-image	none

You will find that the menu is now horizontal when viewed in a browser; the Float: left did that. There is ample padding between the text and the edges of each button. There is also a dark gray separating line to the right of each button.

What you see in Dreamweaver may look a little funkier:

Let’s add a lighter gray background when the cursor hovers over a button.

5. Add a new Compound Style in menu.css with the name ul.dropdown li:hover
6. Use these settings in the CSS Rule definition box:

Category	Setting	Value
Background	Background-color	#eeeeee
Positioning	Position	relative
	Z-index	599

Check out the cool color change when you hover over a button in the browser.

So where did our second-and third-level buttons go? They are there but still hidden when we hover over the first-level buttons. What we can’t see is that we just aligned the second-level buttons with their respective first-level buttons vertically. We can’t see then because in #2 above we made them hidden when the menu is not is use. Now we can make them visible if someone hovers over a button.

7. Add a new Compound Style in menu.css with the name ul.dropdown li:hover > ul
8. Use these settings in the CSS Rule definition box:

Category	Setting	Value
Positioning	Visibility	visible

What we get here in the browser is close to done. We still need to get those third level buttons to move out to the right instead of drop down. And we don’t need that right border line for these lower buttons.

9. Add a new Compound Style in menu.css with the name ul.dropdown ul li
10. Use these settings in the CSS Rule definition box:

Category	Subcategory	Setting	Value
Box		Float	none
Border (CHECK same for all in all 3 columns)	Top	Style	none

Almost! One last step to push those birds and beasts over.

11. Add a new Compound Style in menu.css with the name ul.dropdown ul ul
12. Use these settings in the CSS Rule definition box:

Category	Subcategory	Setting	Value
Positioning	Placement	Top	1px
		Left	99%

Make sure you put % for the Left placement, not px!

My, my, aren’t you slick. Those birds and beasts pop out to the right like champs.

 

Next: Customizing the Menu for Your Needs ^[10]

Customizing the Menu for Your Needs

This menu is fine for a four-animal zoo if you happen to own one. Chances are you don’t, so you need to adapt this menu for your own needs. Here are some tips.

Content
Try to organize the navigational structure before coding, and get the HTML lists all squared away as in “Step Two: Build the HTML ^[11]” before you build the CSS. Because Dreamweaver doesn’t display complex menus quite right, you might need to go into the code directly to make changes to the HTML list later. Alternately, you can detach the CSS in order to edit the HTML more easily, then reattach it. This is a simpler solution if you are unfamiliar with HTML. (Get familiar! It’s totally worth it.)

To detach the CSS file from your HTML file:

1. In the CSS Styles panel, click on menu.css.
2. Click on the trash can icon at the bottom of the CSS Styles panel.

To reattach the CSS file to your HTML file:

1. In the CSS Styles panel, click on the Attach Style Sheet icon at the bottom of the CSS Styles panel.
2. Click Browse to navigate to your menu.css file and click OK. Click OK again to save the change.

 

Incorporating the Menu into a Page
Chances are good too that you want this menu inside a page instead of by itself. Here are some loose instructions for that, if you already have a web page with an external CSS file attached to it. This code will work for a menu with any number of items up to three levels deep.

1. With your cursor somewhere inside the funky menu layout in menu.html, click on in the Tag Inspector below. This selects the entire list.

2. Edit > Copy to copy the code to your computer’s clipboard.
3. Open your HTML file for your web page and place your cursor where you want the menu to appear. This may take some trial and error to get exact placement if you are unfamiliar with HTML.
4. Edit > Paste to paste the menu code.
5. Return to menu.html. Just below the Document Tab click the small button for menu.css.

6. Edit > Copy again to copy the CSS to your computer’s clipboard.
7. Open your main CSS file for your web page and place your cursor at the bottom of the existing code.
8. Edit > Paste to paste the CSS code for the menu.

 

Changing the Font or Colors
To change any individual CSS rule, you click on its name in the CSS Styles panel and click on the Edit Rule… icon at the bottom of the panel.

To change the font, click on ul.dropdown a:link and click the Edit Rule icon. Change the Font-family in the Type category and click OK. Do the same for ul.dropdown a:visited and ul.dropdown a:hover. You can edit the text color here too.

To change the background color, edit ul.dropdown: click on the color swatch for background-color in the Background category, and select a new color.

To change the background color for the hover state, edit ul.dropdown li:hover in a similar manner.

 

Adding a Background Image
You may notice that my own menu above behaves like the one we just designed, but it has a buttony look which is supplied by this background image (you may steal it).

Save your background image somewhere in your Web site folder. Here’s where the background image needs to be placed in our CSS code:

• ul.dropdown
• ul.dropdown ul
• ul.dropdown li:hover
• ul.dropdown ul li

In each case, do the following:

1. Click the Edit Rule icon as instructed above.
2. In the Background category, click on the Browse icon next to Background-image and navigate to your background image.
3. Click OK to select the image, and click OK again to save and exit the CSS Rule Definition.

 

Good luck! If you have any questions or feedback, I’d love to hear from you in the comments below.