It works using only CSS in all modern browsers: Firefox, Opera (9+ recommended), Safari, Camino, OmniWeb, Konqueror, IE7. For IE6 I developed small Javascript that circumvents the lack of li:hover support in it. Take a look at the examples to see it action. Instructions are also given, along with troubleshooting hints for possible problems.

Instructions

There is not much I need to say here (or so I hope). The examples I made will be your starting point and for anyone reasonably skilled with CSS it should be enough. The files are heavily commented and should be an easy read.
Here, I will emphasize the steps that you need to do, so you can better look for particular code in the examples.

Please remember my original goal: this is intended for the people building modern sites based on CSS layouts. You need (at least) intermediate CSS skill level in order to develop attractive menu designs. If you have a good grasp of concepts and techniques like "box model", "sliding doors", floating and positioning etc. - I believe you will do just fine. If not, you should first learn those.

With that out of the way, here we go.

The menu's HTML code is simplest possible nested unordered lists.

You can have as many menus on the page as you like, along with other lists that are not menus.

Each ul that is to be made into menu, must have a class of adxm

You can use either id or class to identify the menu (main, top-level list) - then use that to build the styles. My examples use a class of menu

There are 3 distinct parts of each example:

main style, for all modern browsers with CSS2.1 support

IE6-only style tweaks, enclosed in conditional comment

ADxMenu.js script for IE6, enclosed in the same conditional comment

CSS parts marked under "ADxMenu: BASIC styles" are just what they say - absolute minimum of rules required to make a particular menu. I do not expect you will need to change much (if anything) here.

CSS parts marked under "ADxMenu: DESIGN styles" are the part where you will work - this is where you implement your design. All my examples share the similar simple look.

Avoid styling of the nested ul lists. They are specifically used to achieve "the sticky" - submenus would not instantly dissappear if your mouse sidetracks a bit while moving through the menu. If your design can't be implemented without the help of the nested uls, then you need additional div around it. This example demonstrates such variation.

Useful variants

HTB-R: horizontal, top to bottom, right aligned, submenus stack right to left

HBT-R: horizontal, bottom to top, right aligned, submenus stack right to left

Other

Proof that menu works in IE on DOM.onload; read: before window.onload; read: before all images, videos, Flash and similar external objects have loaded you need to be very quick and try using the menu as soon as it appear on the page. Compare that with version that uses window.onload for menu setup.

Vertical menus are too wide

Sticky areas cause unneeded scrollbars to appear

Remember this image?

"Sticky" areas around the submenu

There is a 30px (per my examples) of transparent space around the submenus. Thus, if you have, for instance, horizontal menu aligned to right and the submenu for the most right item opens at less then 30px from the right edge, you will have the scrollbars showing up. Similar goes for left-hand menus flushed to left edge of the browsers.

In order to avoid this, add an id to the offending menu and do this (for left-hand case):

#THATid {
margin-left: 0;
padding-left: 0;
}

Add !important if necessary.

It all got complicated when I started doing my design and now it doesn't even work

Kill entire "DESIGN styles" parts, bring back the original "BASIC styles" (if you have changed them) and start from scratch. Really, that's the best option, which I sometimes use myself.