Adding a CSS-based drop-down menu to your page

You can make drop-down menus by using CSS to customise a set of bullet-points…

• Link 1
• Link 2
  • Link 2a
  • Link 2b
  • Link 2c
• Link3

In the example above the bullet-points along the left become the main menu, while the second set that is indented becomes the sub-menu. You can make as many bullet-points and indented bullets as you need. You can use the following code to make the bullets:

<div class=menu><!–a div box to put the menu into–>

<ul><!–start set of bullet-points (Unnordered List)–>
<li>Link 1</li><!–add bullet-point (List Item)–>
<li>Link 2<!–add another bullet-point–
<ul><!–start a new set of bullet-points to create the sub-menu–> <li>Link 2a</li>
<li>Link 2b</li>
<li>Link 2c</li>
</ul>
</li><!–end sub-menu bullets–>
<li>Link3</li>
</ul><!–end all bullets–>

</div><–end the menu div box–>

Next we can select each bullet-point’s text in dreamweaver and use the propeties box to add a link to it. This should change the code for each item so that it reads as follows:

<li><a href=”yourpage.htm”>Link 1</a></li>

And then we modify the code for each of the main menu items by adding a ‘hide’ class to the <a href…> tag:

<li><a href=”your page.htm” class=”hide”>Link 1</a></li>

This sets us up with the basis for our menu but we need to apply some style sheets to make everything look and act like a drop down menu. We’ll use CSS to remove the bullet shape, add some coloured panels and rollovers, align the menu across the page and use the ‘hide’ class to hide the sub-menu.

This is the CSS file that you’ll need – right mouse click and save in the same folder as your page, and then link your page to the CSS. It should then convert the appearance of your bullet-points and start acting like a drop-down menu when you view it in a browser.