Introduction

The 2 most popular methods for creating drop-down menus are ...

1. JavaScript drop-down menus

2. CSS drop-down menus

JavaScript drop-down menus

The essential idea here is to use Javascript to turn on and off layers. This can be achieved by using a programme like FireWorks or you can build one yourself using div tags/layers and the show/hide layers behavior in Dreamweaver.

To do the later, try this ...

Create a <div> box for your Menu Title (the box that when rolled over reveals the Drop Down Menu), make it into a layer by positioning it.

Create another <div> box for the Drop Down Menu, make it into a layer by positioning it immediately under the Menu Title box, leaving no gap between them, and set Visibility to "hidden".

You now need to attach javascript behaviours to the layers ...

The Menu Title layer needs 2 Show-Hide Layer behaviours ...

1 OnMouseOver show the Drop Down Menu layer

2 OnMouseOut hide the Drop Down Menu layer

The Drop Down Menu layer needs 3 Show-Hide Layer behaviours ...

1 OnMouseOver show the Drop Down Menu layer

2 OnClick hide the Drop Down Menu layer

3 OnMouseOut hide the Drop Down Menu layer

An example

Here's an example.

CSS drop-down menus

Using pure CSS to create drop down menus is elegant and creates potentially very compatible and easy to edit menus. However, most methods use the hover psuedo-class which does not work in all versions of IE to date (IE7).