Dreamweaver - HTML and CSS Using Dreamweaver

Drop down menu using CSS

Daniel Walter Scott || VIDEO: 33 of 34

Download Exercise Files

Comments

Overview

I recommend hosting your new website with Bluehost, you can get a big discount by signing up with this link: https://www.bluehost.com/track/byol/byol_dwhacud_33

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.
     
    
  6. Highlight the text & choose unordered list from the properties panel.
     
    
    
  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.
     
    
  11. Ok
  12. Repeat this for all your pages.
     
    
    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).
     
    
    
    
     
    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).
     
    
  28. Create a new selector called #nav a:hover (this will control your hover colour).
  29. Choose a background colour.
     
    
  30. Preview in a browser.
     
    
     
    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
     
    
  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.
     
    
  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
     
    
  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.
     
    
    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:
     
     
    
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;
 }

Coming Soon