Please note that I do not recommend using this kind of menu for public sites, since it is inaccessible for users with CSS turned off and several mobile browsers. Some users also find it difficult to navigate with pull-down menus. If you use this kind of menu on a site, make sure that navigation is possible even without the pull-down.
Here is an example of how such a menu could look like. Hover to see it in action.
How is this done? The markup looks like this:
As you might guess, the technique is basically about nesting UL elements. The first level of list items is the main navigation. The CSS to handle it looks something like this:
The second level of unordered lists is the actual drop-down. They are initially invisible, done by setting display:none. They are also positioned absolute, like this:
As always, there is plenty of room for improvement and this code should only serve as a humble example (for instance, don't use inline styles and scripts!).
/ Reine 2003