Make a Multi-Level CSS Dropdown Menu in Dreamweaver CS4

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.

Collapsed menu

Collapsed menu

  1. Add a new Compound Style in menu.css with the name ul.dropdown li
  2. 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.

Horizontal first-level buttons

Horizontal first-level buttons


What you see in Dreamweaver may look a little funkier:
Funky Dreamweaver layout

Funky Dreamweaver layout


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

  1. Add a new Compound Style in menu.css with the name ul.dropdown li:hover
  2. 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.

Hovering over a button

Hovering over a button


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.

  1. Add a new Compound Style in menu.css with the name ul.dropdown li:hover > ul
  2. Use these settings in the CSS Rule definition box:
Category Setting Value
Positioning Visibility visible

The subnagivation appears!

The subnagivation appears!


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.

  1. Add a new Compound Style in menu.css with the name ul.dropdown ul li
  2. 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

Borders removed

Borders removed


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

  1. Add a new Compound Style in menu.css with the name ul.dropdown ul ul
  2. 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!

Pop those birds and beasts out

Pop those birds and beasts out


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

 

Next: Customizing the Menu for Your Needs

Tagged with: , , ,
Posted in CSS, Dreamweaver, Tutorials
79 comments on “Make a Multi-Level CSS Dropdown Menu in Dreamweaver CS4
  1. Killerwebs says:

    Excellent post, this helped me loads!! thank you

  2. chloe says:

    thank you so so so so so so much

  3. Tinesa says:

    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!

  4. Ensys says:

    I have one problem is that, shall we use this HTML Drop-down code for Make dynamic multi-Level CSS Drop-down Menu.

  5. danny3mancom says:

    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

  6. Natascha says:

    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!

  7. Bud says:

    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.

  8. Ryan says:

    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

  9. Kennet says:

    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..

  10. Jennifer says:

    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.

  11. Stephen says:

    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. :)

  12. van says:

    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.

  13. Joan says:

    Thanks for the handy tutorial. How can I adapt the tutorial to create a vertical navigation menu?

  14. Don Allen says:

    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?

  15. Jujubee says:

    Awesome post ! Great help… thank you !

  16. Jujubee says:

    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 …

  17. Shozib Abbas says:

    Hello Brother! I really appreciate your work on this marvellous tutorial. You have been of great help to me.
    Thanks

  18. William says:

    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

  19. 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

  20. Maria says:

    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!

  21. Dave says:

    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

  22. Ryan says:

    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

  23. Ab says:

    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!

  24. pranjali says:

    Thank you for this tutorial.
    Its was a great help.
    But i have one question..
    How to attach this file with asp.net?

  25. Jaynne says:

    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

  26. Steve says:

    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.

  27. Dedy Black says:

    i was try this tutorial but the result is error.there’s nothing display second level menu.

  28. Gayathri says:

    You are awesome. Made it so simple and easy. I like very much. Thanks a lot

  29. Hans Stråhle says:

    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?

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>