Make a Multi-Level CSS Dropdown Menu in Dreamweaver CS4

Menu Preview

Menu Preview

Dreamweaver CS4Traditionally, 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.

 

Step One: Plan Your Nav

Kookaburra

Kookaburra

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 and Hammerkop for Birds; Wolverine and Wombat 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:

Sketch of Navigation Organization

Sketch of Navigation Organization

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.
Create a new HTML page

Create a new HTML page

  1. Save the file as menu.html (File > Save As). Click on the Design button in the Document Toolbar.
Save As and Design button

Save As and Design button

  1. 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.
Unordered List icon

Unordered List icon

  1. 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.
First Level Navigation

First Level Navigation

  1. 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.
Second-level navigation

Second-level navigation

  1. Type in Hours & Pricing and press Enter/Return. Type in Maps and press Enter/Return. Type in Calendar.
Subnavigation for Visit Us

Subnavigation for Visit Us

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

Subnavigation for Animals

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

Subnavigation for Birds

  1. Repeat for beasts: type in Wolverine and Wombat.
Subnavigation for Beasts

Subnavigation for Beasts

  1. 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.
Add a link placeholder

Add a link placeholder

  1. Do the same for all the other navigational items.
Add link placeholders

Add link placeholders

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

 

 



Share this Article

You can share this article almost anywhere but on your car's back bumper.
Hover over this bar to access the menu.
Share/Bookmark

 

Related Posts

Comments

51 Comments

  • By muthiulhaq, 06/04/2009 @ 1:00 am

    Hi,
    Thanks this very useful one.

  • By Cory Cummings, 06/10/2009 @ 1:50 pm

    Hello! Thank you so much for the article. The only thing I am having trouble with is centering the menu. You can go to my site and see what I mean. Could you please help me with this?

  • By Dawn Pedersen, 06/10/2009 @ 2:00 pm

    Try this, Cory.

    Edit the .dropdown class and add the following two settings in the Box category, Margin subcategory (uncheck “Same for all”):

    Right: Auto
    Left: Auto

    The CSS code then will look like this:

    ul.dropdown {
    background-color: #cccccc;
    padding: 0px;
    float: left;
    list-style-image: none;
    list-style-type: none;
    position: relative;
    z-index: 597;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    }

  • By Cory Cummings, 06/10/2009 @ 4:47 pm

    that did not seem to work…

  • By Dawn Pedersen, 06/10/2009 @ 5:00 pm

    Sorry! Wrap the navigation list with div with its ID set to “nav”. Then create an ID-type CSS rule called #nav, with the margin-left and margin-right set to “auto” as above. You will need to tell it a specific width too for this to work. For your particular menu, the width is 974px.

    HTML
    <div id="nav">
    <ul class="dropdown">
    (etc.)
    </ul>
    </div>

    CSS
    #nav {
    margin-right: auto;
    margin-left: auto;
    width: 974px;
    }

  • By Tirath, 06/11/2009 @ 9:29 am

    Awesome tutorial
    nice step by step detail tutorial which are so much useful
    I learn a lot
    Thanks so much for posting valuable tutorials for us
    thanks for your kind effort
    Keep up good work
    God bless you

  • By jordan, 06/16/2009 @ 12:23 pm

    very nice.
    I have a couple questions:

    any way to make it more visually appealing without having to do anything too drastic?

    and how do you apply the bar to multiple pages? (this may be a dumb question) but i am a novice college student still learning. your help is greatly aprreciated!

  • By Dawn Pedersen, 06/16/2009 @ 12:27 pm

    Hi Jordan!

    Check out “Changing the Font or Colors” and “Adding a Background Image” on page four of the tutorial.

    To apply the bar to multiple pages, you need to put the HTML code onto those pages. In Dreamweaver, you can use the Templates feature to do this (which takes some time to learn but is worth the effort if you work in Dreamweaver a lot).

  • By Dani, 06/16/2009 @ 6:24 pm

    This was helpful thanks…how would I include an arrow graphic on the 2nd level links to identify there is a 3rd level.

  • By Dawn Pedersen, 06/16/2009 @ 6:51 pm

    Thanks for a great idea, Dani. That can be accomplished with background images.

    A down-pointing arrow should go on the background image for the first level rule: ul.dropdown.

    A right-pointing arrow should go on the background images for the second level rules: ul.dropdown ul and ul.dropdown li:hover.

    A plain background image with no arrow should be used for the third level rule: ul.dropdown ul li.

  • By Amanda, 06/23/2009 @ 10:50 pm

    Hello

    I have tried to create a dropdown menu twice, and still cannot get it to display properly.

    When I view (F12) the bar as the menu.htm it appears perfectly, complete with dropdown menus, but when I inseret this into the the main page the dropdowns no longer appear.

    Can you suggest a solution to this?

  • By Dawn Pedersen, 06/24/2009 @ 9:00 am

    Hi Amanda! Did you link the page to the external CSS file? See “Content” on page 4.

  • By Amanda, 06/24/2009 @ 11:58 am

    Hello Dawn

    Yes I have added the CSS file for the navigation bar to the main html. (does it matter where on the tree it appears?)

    Is it a problem, because the file I am adding it to is a template? (dwt) or could it be something to do with the width?

    Sorry I’m just really unsure how to fix this problem.

    Thank you for your assistance

  • By Dawn Pedersen, 06/24/2009 @ 12:00 pm

    Hi again! I can’t really diagnose the issue without seeing the files. If you can zip up your site folder (include HTML and CSS file in their respective locations – you can leave out other files), I can try to determine what’s up. If it takes me just a few minutes, I’ll do it for free. Email me at dawn@blulob.com.

  • By aji, 06/27/2009 @ 2:48 pm

    Thank you very very much.. i’d really appreciated it.. and also thanks for the background button image.. very usefull and nice look. have a great day.. :D

  • By Dawn Pedersen, 06/28/2009 @ 8:10 pm

    You’re welcome, aji!

  • By Donna, 07/03/2009 @ 5:33 pm

    I have made my menu and it’s drop down menus. What I am having problems with is the centering of all 3 main buttons, HOME, PRODUCTS, CONTACTS. I did what you suggested to Cory, but it is not stretching the 3 main categories for the full width of 780px. Suggestions??

    Ohterwise, I couldn’t have gotten as far as I have just today! WONDERFUL!!!!!

  • By Dawn Pedersen, 07/05/2009 @ 3:16 pm

    Try this, Donna:

    ul.dropdown
    [BOX] width: 780px;

    ul.dropdown li
    [BLOCK] text-align: center;
    [BOX] width: 219px;

  • By kurt, 07/23/2009 @ 1:30 am

    Hi, is that the only way to make a drop down button? Is there’s another way for it?

  • By Dawn Pedersen, 07/24/2009 @ 11:28 am

    There are many different ways to make drop-down menus. This is just one. They can be done with different CSS techniques, and they can be done using JavaScript.

  • By Andy, 07/27/2009 @ 7:07 pm

    I like this post.

  • By Anna, 09/02/2009 @ 8:08 am

    Hi there,
    I have a tiny problem. Menu is working fine, looks really nice… but only in Mozilla. Checked today in Explorer… and nothing. Dropdown is not working at all. Is there any solution?

  • By Dawn Pedersen, 09/08/2009 @ 10:08 am

    Which version of IE are you viewing it in? It works in IE8 but may not work in earlier versions. That is because IE took a long time to support CSS fully.

  • By Renee Evans, 09/08/2009 @ 2:03 pm

    Most importantly, thank you very much for the CSS tutorial, I had been hunting all over for a really nice looking dropdown bar. I was wondering if you could please help me figure something out. When I view my page in DW (CS4) my last two heading are shown horizontally and not across the page. I know yours does too but my subheadings don’t show, should I keep trying to ignore it since it is functional? I did notice when I add color to the main dropdown head there is a square on the right side that is not colored kinda like the bar is not going all the way over.
    Can you please help me with this?

  • By Renee Evans, 09/08/2009 @ 2:06 pm

    Oops, I meant “When I view my page in DW (CS4) my last two heading are shown VERTICALLY and not across the page.”
    Thanks

  • By Danny Namnum, 09/11/2009 @ 9:03 pm

    Very flexible, I like this better then spry menus because it allows more control over the look and feel. However it would be nice to have animated drop down feature.

  • By Michelle, 09/14/2009 @ 10:35 am

    Hello! I need your help. Right now I have everything working except one thing. I have all 4 main headings stacked on top of each other vertically. I would like to have them next to each other horizontally; therefore, the dropdown menus will appear correctly. Can you please help me with this?

    Thank you!!

  • By rbogartz, 09/22/2009 @ 9:09 pm

    Great article! I’m also still learning how to create websites. I have my css all built and when I put the code in the page it works but isn’t there a way to reference the css so that I don’t have to put the code in on every page?

  • By Trevor, 10/05/2009 @ 7:41 am

    how would i be able to relink the dropdowns

  • By Trevor, 10/05/2009 @ 7:43 am

    never mind i figured it out

  • By Eric Miller, 10/09/2009 @ 10:06 am

    Very useful post. I’m still learning my way around and have struggled with centering my menu. Now it is right where I want it, even on IE!

  • By Josh, 10/10/2009 @ 8:51 am

    Awesome post! We are planning a new website for 2010 and this tutorial taught me exactly what I needed to know! Thank you!

  • By Michael, 10/15/2009 @ 11:21 am

    Great article, thank you!

    However I failed aligning the menu items vertically. Any advices?

    Thanks in advance!

  • By Rowan, 10/20/2009 @ 1:56 pm

    This is a wonderful tutorial – works like a dream! One problem – the drop down blocks are set to a red color, but the text on the page underneath it shows through, as if the red is transparent. I can’t distinguish the menu items. I did set the text div to a lower z index, but it does not help. Can you help? Thank you.

  • By Rowan, 10/20/2009 @ 4:32 pm

    Hello,
    I am answering my own question because I figured it out. I had nested div tags. Even though the z indexes were set – it made a difference to just list each div individually, and set each z index appropriately.
    Hope this helps someone else…

  • By Leslie, 11/09/2009 @ 10:27 am

    Hi. Just wanted to let you know the PRINT THIS ARTICLE link isn’t working for this article. Great tut. Thanks!

  • By Dawn Pedersen, 11/09/2009 @ 12:22 pm

    Thanks for letting me know, Leslie! I have corrected the error.

  • By BT (from Austin), 11/11/2009 @ 4:01 pm

    What a great tutorial – you are awesome. I’m setting this up for a site as a way to “crash course” myself into DW and I’ve learned so much.

    Again, thanks for the great tutorial.

    BT

  • By Amanda, 12/03/2009 @ 10:09 pm

    Hi!
    Thank you SO much for this tutorial; it is very helpful. I have one problem, which is that my dropdown menu works perfectly in CS4 and displays properly under the “Live View”, but does not display anything but basic links in IE [and I downloaded version 8 hoping that was the issue]. Do you have any idea why they aren’t displaying? Thank you!

  • By Amanda, 12/07/2009 @ 9:01 pm

    Update– the dropdown menu displays perfectly in Firefox and Safari but not in either version of IE! I am stumped!

  • By Vijay, 01/21/2010 @ 12:57 am

    Hi Dawn
    i really like it and it is really very good tutorial step by step
    But i have one problem with this menu
    it is work fine in Firefox but it has problem in IE6 please send me solution for this
    on my email address
    vjyxyz@hotmail.com

    as well as other can also send solution if u have thanks in advance.

  • By Libby Starke, 02/05/2010 @ 9:44 am

    I have found your info on creating drop down menus to be incredible – I have spent over two days trying to get this information and you have it clearly and concisely. Every other website (and I’ve been on dozens) either has complicated code with no step-by-step instructions or else the code is “For Sale” Infuriating! Many thanks for your site. Everything so far has worked brilliantly, however I do have one issue. My second level items are never hidden. I have re-entered the info in Menu Magic 2, but they are still visible. Any idea why?

  • By Libby Starke, 02/06/2010 @ 3:38 pm

    Dawn – I emailed you before regarding hidden 2nd level copy – it’s fine now. One thing though: how do I take this nav bar and put it into a webpage on Dreamweaver? Do I need another bit of code for the ‘table’?
    Many thanks.

  • By Andi Sullivan, 02/10/2010 @ 8:58 am

    I have grown in my talents as a web designer after starting in a small communications dept., but have little support and gain training as I can.

    I loved and appreciated your tutorial, but wondered if there was a way for me to center the text of each “button” on the initial view. Also, is there a way to have the hover state’s text color change when you go over the top level button and stay that color instead of just changing when you move over the secondary navigation?

  • By James, 02/16/2010 @ 8:03 am

    I also cannot get this to work in IE (version 8 or otherwise). Looks great in Firefox though.

  • By Daniella, 03/09/2010 @ 9:11 pm

    Hello, I just want to say thanks for the no nonsense descriptions on how to create a dropdown menu. I was wondering how do I add a sound to the links in this menu? Your assistance is very much appreciated.
    Cheers,

  • By Bibi, 03/28/2010 @ 3:21 am

    Thank you so much for sharing this. For quite a while I’ve been trying this, and now it really works. I am so happy :)

  • By priya, 05/04/2010 @ 5:29 am

    hello……..
    I need your help….
    actually i m developing a website…
    so can u explain me how can i make multilevel dropdown menu which will not be hidden by background image of webpage……
    I have tried but the list items of menu becomes hidden by background of my webpage….
    so please support me……

  • By marc winn, 06/03/2010 @ 9:21 am

    Hi Dawn

    Fantastic tutorial, really easy to understand and implement.

    I was just wondering how to put a transparent colour on the dropdown menu?

    Is it adding it as a background image?

    Many thanks again

    Marc

  • By Dan Phillips, 06/15/2010 @ 1:51 pm

    This is the best tutorial for creating a css drop-down menu. HANDS DOWN! Awesome job, thanks a lot. This helped me out INCREDIBLY!

  • By Killerwebs, 07/02/2010 @ 5:14 pm

    Excellent post, this helped me loads!! thank you

 

Links to this Post

RSS feed for comments on this post. | TrackBack URI

 

I’d love to hear from you!