Menu Preview
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.
Step One: Plan Your Nav
Kookaburra
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
An alternate outline would look like this:
- Home
- Visit Us
- Hours & Pricing
- Maps
- Calendar
- Animals
- Birds
- Kookaburra
- Hammerkop
- Beasts
- Wolverine
- Wombat
- Birds
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!
- 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
- Save the file as menu.html (File > Save As). Click on the Design button in the Document Toolbar.
Save As and Design button
- 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
- 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
- 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
- Type in Hours & Pricing and press Enter/Return. Type in Maps and press Enter/Return. Type in Calendar.
Subnavigation for Visit Us
- 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
- 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
- Repeat for beasts: type in Wolverine and Wombat.
Subnavigation for Beasts
- 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
- Do the same for all the other navigational items.
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
Excellent post, this helped me loads!! thank you
thank you so so so so so so much
Redoing this site and the only problem I am having is that the dropdown menu under the titles don’t appear. It doesn’t show the dropdown list under About Us, Ministries and Media. Thanks!
I have one problem is that, shall we use this HTML Drop-down code for Make dynamic multi-Level CSS Drop-down Menu.
hello , can you please help me , i`m stuck at making the second , and third level dropdown, i did exactly as you did , except that my list has more items,but everything i do my 2nd and 3rd level wont show , not even in Live View … i don`t know what to do please help me , thanks
great article….thanks…..if you have any info at all on how I can create a multi column drop down menu similar to the one at http://www.reuters.com/ where I can put both images, links and text in the drop down menu.
Thanks in advance….I really appreciate it!
Excellent tutorial! How do I get the space to the sides of the drop down text links, to also be linkable? Right now only the text is linkable, not the entire 150px wide box.
Thanks in advance.
AWESOME tutorial!!! One thing though, and I am certain it is something that I have not done correctly. Your examples show that when you hover over “beasts”, the “animals” link shares the hover state. When I select a subcategory link, the main navbar link reverts back to the original link state. Do you have any ideas of where I went wrong?? Thanks!
RL
Thx Dawn for wellwritten tutorial. However i miss being able to see the actual HTML-code after finishing step 11 in “design-mode”. Since HTML is what we actually are doing. And because my somehow is not working properly in DW; have to write it with to get indents. As a result im not sure i end up with same code as you..
Thank you so much for this very easy to follow tutorial. I love CSS. I have been wanting a nice, clean, simple drop-down menu and this does it. It beats JavaScript all to heck.
Thanks for the post, been having trouble with it for a quite a long time. Although I can’t get the 2nd and 3rd sub menus to appear in the browser and I did it all. Any help would be appreciated.
that is really a lot of unnecessary steps to add a basic dropdown menu bar. I thought this tutorial was showing hoe to add sound to the navigation links.
Thanks for the handy tutorial. How can I adapt the tutorial to create a vertical navigation menu?
This is a very helpful article. But, when I go to the CSS Rule box, the Selector Name: does not include ul.dropdown. What am I missing?
Awesome post ! Great help… thank you !
HI, I am sorry but I tought the script was awesome and I still think it is but it doesn’t work in internet Explorer 9. could someone help me, I haven’t seen a post from Dawn for a while now …
Hello Brother! I really appreciate your work on this marvellous tutorial. You have been of great help to me.
Thanks
YOUR INSTRUCTIONS ARE VERY GOOD HOWEVER THE FINALE STAGE, PG4 NO.5 WHEN I DO THIS MY SHOWS EXACTLY AS YOURS BUT THE COPY BUTTON IS GREYED OUT AND I CANNOT MOVE FORWARD, I HAVE HIGHLIGHTED ALL THEN COPY AND PASTED BUT NOTHING WORKS.
I DID NOT HAVE CSS FOLDER SO JUST CREATED ONE IN THAT NAME. I’VE GONE WRONG SOMEWHERE HAVEN’T I?
WILLIAM
hello i made ur navMenu. but wen i put on my original Dreamweaver site made by photoshop the Navbar isnt lined up with the banner and doesnt extend all the way with the width of the site.i’ve been messing with it a while but cant seem to get right settings put in
I tried the Spry Menu in Dreamweaver for a new site I’m creating, but could not get it to work after repeated attempts. Fortunately, I found your wonderful tutorial for which I am very grateful. I just had one problem with it. On page 4, in the section, “Incorporating the Menu into a Page” copying the code with this method didn’t work for me. I went over everything repeatedly, but step 5 was the problem. Only titles copied when I tried the menu.css button below the document tab.
Is it possible for you to show us where to copy the codes for both menus directly into our code views? Thanks so much for this great tutorial!
Thanks for the tutorial, I have repeated this tutorial several times from scratch, I keep missing something out but cannot work out what. The main navigation bar looks fine but the text only changes color when directly over the text not the button. Then the sub menus in normal state do not have a background color until hover when the #ccc shows. The same issue carries through to the 3rd menu.
Could you advise as to which part of the css I should be checking as I obviously missed something important.
Thanks again
i love the tut but have a major problrm. when I click on a link and try to click on the link back it doesnt take me to the same place. for example if i click on my about us page but click on the home page it doesnt have the same path as the first time. Please help
Hello!
I just want to ask how to make the third level. Im doing a dropdown menu but I can find how to make the third level in a vertical way. I hope u can answer me. I really desperate!
Thank you for this tutorial.
Its was a great help.
But i have one question..
How to attach this file with asp.net?
I followed the instructions and things seemed to work. However, on my new website that I am developing (I am a student) I have an image as the top banner and used image maps for the HOME | ABOUT | PORTFOLIO | CONTACT links. I wanted the drop-down menu for items under the PORTFOLIO link. I am using DW4 and CSS.
Thanks,Jaynne
Not sure if Dawn is reading this anymore… but I also cannot ‘unhide’ the second level items. I did it as per the instructions, but setting visibility to visible doesn’t do anything, not even if I make it ‘important’ to override other things. Only thing I did differently to the article was changing settings as I went to make it look like I need for my site – colours etc. but I’ve been through all the previous commands looking for things to do with visibility or placement in the hope of finding the problem, but to no avail.
i was try this tutorial but the result is error.there’s nothing display second level menu.
You are awesome. Made it so simple and easy. I like very much. Thanks a lot
I have a web site that I wrote in JavaScript and now I want to rebuild it using DW. I am testing this menu system but I have set borders to 4px width. It turns out that the bottom border of a top box and the top border of a first drop down box overlap leaving everything misaligned. I would have liked to attach an image of it but I can’t do that here, can I? What could be the cause of this?