Categories
design education technology

Make a Multi-Level CSS Dropdown Menu in Dreamweaver CS4

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” 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.
Detach CSS file
Detach CSS file

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.
Select the entire ul.dropdown
Select the entire ul.dropdown
  1. Edit > Copy to copy the code to your computer’s clipboard.
  2. 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.
  3. Edit > Paste to paste the menu code.
  4. Return to menu.html. Just below the Document Tab click the small button for menu.css.
View menu.css
View menu.css
  1. Edit > Copy again to copy the CSS to your computer’s clipboard.
  2. Open your main CSS file for your web page and place your cursor at the bottom of the existing code.
  3. 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.

Edit Rule... icon
Edit Rule... icon

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.

 

Done

79 replies on “Make a Multi-Level CSS Dropdown Menu in Dreamweaver CS4”

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;
}

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;
}

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

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!

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

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.

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?

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

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 [email protected].

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

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

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?

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?

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

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?

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!

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.

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…

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

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!

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
[email protected]

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

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?

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.

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?

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,

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

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

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!

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

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.

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?

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 …

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!

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.