Features

• Simplest possible HTML
• Simplest possible maintenance
• Ready-made CSS for basic work
• Helps reduce simple errors by including a safe zone (30px) around the menu - if your mouse slips slightly away from the menu, it will not disappear
• Visual design limited only by your graphic skills and CSS (and/or Javascript) knowledge

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.

1. The menu's HTML code is simplest possible nested unordered lists.
2. You can have as many menus on the page as you like, along with other lists that are not menus.
3. Each ul that is to be made into menu, must have a class of adxm
4. 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
5. 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
6. 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.
7. 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.
8. 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.
9. ADxMenu.js script adds three significant classes on active item/link/submenu:
   • Each li which is hovered has adxmhover class. This allows you to simulate li:hover selector.
   • a element inside hovered item (its first child) has adxmhoverA class. This allows you to simply simulate li:hover>a selector
   • First nested ul element inside hovered item has adxmhoverUL class. This allows you to simply simulate li:hover>ul selector
10. If you need the menu to be completely visible in IE6 when Javascript is turned off, please read this blog post.

Additional thoughts

1. You can use ordered lists (ol) too - just change the styles accordingly + change the ADxMenu.js.

Examples

These are 4 most basic examples.

1. HTB: horizontal, top to bottom, submenus stack left to right
2. HBT: horizontal, bottom to top, submenus stack left to right
3. VLR: vertical, left to right, submenus stack top to bottom
4. VRL: vertical, right to left, submenus stack top to bottom

These are the only ones that will always be updated to the latest version.

Showroom

These examples will usually stay as they were at the moment of creation. Look for the last updated date at the bottom.

IE6 double styling

1. Vertical menu with different styling, depending on whether Javascript is enabled or disabled.

Alternative approach to "safe-area"

With non-semantic div around each submenu, for the cases when you must style UL's background. Use this only when menu design absolutely requires this.

1. HTB-DIV: horizontal, top to bottom, submenus stack left to right

Useful variants

1. HTB-R: horizontal, top to bottom, right aligned, submenus stack right to left
2. HBT-R: horizontal, bottom to top, right aligned, submenus stack right to left

Other

1. 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.
2. Working together with WCH (relevant only for IE6/IE7)

Troubleshooting

Did you analyze the examples? I did my best to keep them simple and commentful so you build whatever you need. If not, please do so.
If yes, then read on - these are the most frequent issues.

Menu can't open over (disappears under) Flash

This is not the problem with the menu or CSS, but with the Adobe Flash plugin. To resolve it, you need to set the embedded content to be transparent:

<object ...>
<param name="wmode" value="transparent" />
</object>

<embed ... wmode="transparent" ... />

Being a standards-oriented developer, you are not using embed,right? :)

Parts of the menu disappear under other elements on the page, in IE6/IE7

IE6 and IE7 have serious bugs related to CSS position rule. I have written a tutorial on this issue – I strongly recommend you read it.

In essence, make sure that the highest positioned element in the structure that contains the menu has the highest z-index value.

Menu can't overlap select elements in IE6

This is a problem with IE6, and you need to use my WCH script. Simply load it before the ADxMenu.js and you'll be just fine. Like this:

<!--[if lte IE 6]>
<script type="text/javascript" src="PATH_TO_WCH/WCH.js"></script>
<script type="text/javascript" src="PATH_TO_ADXMENU/ADxMenu.js"></script>
<![endif]-->

I made an example to demostrate how ADxMenu and WCH work together.

Vertical menus are too wide

You need to apply a width for the vertical menus:

.menu {
	width: 12em;
}

Use the value that fits your layout, but use it.

Sticky areas cause unneeded scrollbars to appear

Remember this image?

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.

Usage terms (AKA is this free or not)

Public domain, use as you wish, where you wish to.