Creating drop-down menus by Matt Ottewill

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

All drop down menu examples are here

JavaScript drop-down menus

There are many ways of using JavaScript to create a drop down menu device, the following is one simple solution.

The essential idea here is to use Javascript to turn on and off (CSS) 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 JavaScript / CSS drop down menu.