33 - Drop down menu using CSS


Questions & Comments

Khanthaly Sivongxay - 10 months ago

I’m not able to find display styles to turn off css styling to edit. It’s step 31 in this tutorial. I’m currently using Dream Weaver cc on a Mac.

Administrator Tayla Coman - 9 months ago

Hi Khanthaly, could you try some of the suggestions on the Adobe forums page: https://forums.adobe.com/thread/454034

ALL ACCESS: $12 per Month + Cancel anytime   

Video Description

Drop down menus (CSS)

In this tutorial we'll create a drop down menu using CSS. This method is complies to web standards, works on mobile and is very Google (SEO) friendly.

  1. File > New > Blank Document.
  2. File > Save - dropdownmenu.html
  3. Make sure you're in design view.
  4. Create a div and call it #nav. You can give it dimensions that fit with your site. I've created one that has a width of 800px & a height of 80px.
  5. Inside the #nav div type out your menu buttons e.g. HOME, PRODUCT, CONTACT US.
    CSS menu - beginning
  6. Highlight the text & choose unordered list from the properties panel.
    CSS menu ordered listCss menu ordered list
  7. Highlight the first word home.
  8. Insert > Hyperlink
  9. Link: index.html page.
    Note: if you haven't created your pages to link to yet you should use the # character. This works as a placeholder. 
  10. Use the title to describe where your link is going. E.g. Camper van hire. 
    Hyperlink in menu
  11. Ok
  12. Repeat this for all your pages. 
    CSS menu with links
    Now we need to format the hyperlinks so that they look like buttons. We need to remove the default padding and margins and remove the bullet points. 

    Note: If you're working on a new document you'll have to create a new style sheet. If you're working on an existing website you can use your existing style sheet.
  13. Click your css style shee in the CSS Design panel.
  14. Add a selector by clicking the + button.
  15. Name your selector: #nav ul
  16. Make the padding & margins on all sides 0.
  17. Make the: list-style-type: none (this will remove the bullets).
    CSS links with no bullets
    Remove bullets from CSS menu

    Note: Next we want to get the list horizontal instead of vertical.
  18. Add a selector by clicking the + button.
  19. Call your selector: #nav li
  20. Change the float to: left. 
  21. Create a new selector called #nav a
  22. From the properties add the values:
  23. Padding: top 5px, bottom 5px, left 20px, right 20px
  24. Display: Block
    Note: This will increase the active area of the link to the size of the surrounding list item.
  25. Background colour: blue.
  26. Pick a font and font colour.
  27. Text-decoration: None (this will remove the underline from the hyperlinks). 
    CSS menu block colour
  28. Create a new selector called #nav a:hover (this will control your hover colour).
  29. Choose a background colour. 
    CSS menu button hover colour
  30. Preview in a browser. 
    CSS Menu roll over

    Note: The navigation should change colour as your move your mouse over it. Next we'll get the drop down menu to work. 

    To add a drop down to your current menu we need to add a new unordered list. To make this easy we'll turn off the CSS styling for a moment.
  31. Turn the tick off: View > Style Rendering > Display Styles 
    Disable CSS styles in Dreamweaver
  32. Under the Product link press enter and type the dropdown list e.g. Red Widget, Blue Widget, Green Widget.
  33. Select the new menu items and choose 'indent' from the properties panel.
  34. Add hyperlinks to the new list. Remember you can use # if you haven't created the pages yet. 
    Nested CSS list for menu
  35. Preview in a browser 
    Note: Next we need to hide the new list and get it to activate only when you hover your mouse over the product menu item. 

    Note: We can now turn our CSS back on: View > Style Rendering > Display Styles
  36. Create a new selector called #nav ul ul
  37. In the properties choose:
  38. Display: None
  39. Position: Absolute
    CSS menu absolute positioning
  40. Create a new selector called #nav ul li:hover > ul
  41. In the properties choose:
  42. Display: Block (this with make the drop down menu appear when you hover over it).
  43. Preview in a browser. 
    css menu drop down if stacking right
    Note: We now need to get it to stack vertically instead of horizontally.
  44. Create a new selector called #nav ul ul li
  45. In the properties choose: Float: None
  46. Preview in a browser: 

    Completed CSS drop down menu

Done!

If you've got questions about this tutorial or if you're having trouble with it. Use the comment below for help.

Cheating: Here is the CSS:

Note: If the div tag you have your navigation inside is different from the name I've given mine here (#nav) then replace all occurrences with the name you have used.

#nav ul {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
list-style-type: none;
}


#nav li {
float: left;
}


#nav a {
background-color: rgba(64,160,189,1.00);
display: block;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 20px;
padding-right: 20px;
color: rgba(255,255,255,1.00);
font-size: 0.9em;
}


#nav a:hover {
background-color: rgba(11,255,239,1.00);
}


#nav ul ul {
display: none;
position: absolute;
}


#nav ul li:hover > ul {
display: block;
}


#nav ul ul li {
float: none;
}

ALL ACCESS: $12 per Month + Cancel anytime