This guy YoungPup has created some interesting stuff over the years. He's got some diverse menu systems and some other cool widgets I've incorporated here and there -- but I'm a particular fan of this system. Although it hails all the way back to 2001, it's pretty tight stuff; I've had to make only a couple of alterations, and that to cope with browsers that either didn't really have a footprint or didn't exist when he authored the beast.

This thing is flexible enough that I've actually used it as a base for driving a dynamically generated menu system as part of a customization for a CMS that will remain nameless. [Settle down; that's not the version I've applied here.]

• This version allows for only one level of dropdown -- nothing nested.
• Very nice transitions -- and it's all malleable. Up, down, left, right, &c.
• Utilizes absolute positioning -- so unless your menu is flush left, you'll need to position accordingly both with the menu code and the overall DIV.

• Explorerism #1: If you try to position this in a DIV with a relative DIV below it, Explorer will apparently render the z-index local to the containing DIV. Try putting the menu inside a second absolute DIV with the z-index slightly bumped.
• Explorerism #2: Works a whole lot better in a complex design if you use a simple background image rather than a background color.
• EverythingElseism #1: If you attempt to render over Flash [say, a menu with Flash below it] the dropdowns won't render fully in everything -- unless you cheat and use that background image mentioned above.
• Borders being what they are in CSS -- where everything renders them slightly different -- it's usually easiest to put a border on the bottom of the menu items, use a background with borders painted for the menu items, and then put a one-pixel DIV at the top of the whole menu with the appropriate background color and a 1px image, then adjust the height by 1px. Be glad I figured that out for you.

• You'll need to call the .js into the page using something like in the head.
• You'll also need a local script that has two components: One for each of the menus like new ypSlideOutMenu("menu1", "down", 20, 43, 170, 40) where you the variables are the menu name, the direction it travels, the absolute distance from the left, the absolute distance from the top, the menu's width, and the menu's height; One to activate the menus in the form ypSlideOutMenu.writeCSS();.
• The menu DIVs themselves should be embedded in the same DIV holding the primary content.
• Your CSS must match the scripting, or things will go kerflooey.

This particular version comes from SourceForge and is licensed under AFL 2.0.