This page does not have its own menu. Rather, references are made throughout this page to other menus. This page assumes you're comfortable with the basics of WebDDM. The menu on the last tutorial page was OK. It has some nice effects, and most importantly, it gets the job done.
The architecture of that menu is simple: Each item holds its own data and styles.
However, sometimes we need to take a different approach. Take, for example, the main menu.
Each item has its own styles... but there is also a "background item" that enhances all of the items! We need to make a "background item". This item does not have rollover or menuopen code (although technically it can) and it doesn't have any items. If you have used WebDDM 3.0 or 3.2, you would expect to see this paragraph on how to make background items:
In WebDDM, each item has a z-index higher than the last... that it, it appears above the last item defined. Obviously, we don't want the background item to completely cover other items, so it will be the first item in the "items" array.
To prevent WebDDM treating the background item as a regular item, we can also set the "isContainerItem" to true.
One more thing. When you move the mouse from an item with its submenu visible to a different item, the submenu of the item we were just over closes. This is a problem when using background items because, technically, a background item is still an item! The answer is to move the 'items' element of the subitems so that the mouse is always over the menu or its parent. Again, this is the OLD way of doing it; just here for historical purposes and as an example.

// Begin array of items, level 0
'items':{
	'top':0,
	'left':0,

	// Begin item 1
	// This is sort of the container for all of the rest of the items
	1:{
		'content':' ',
		'css':'line-height:1',
		'isContainerItem':true,
		'width':342, 'height':28, 'left': 0, 'top': 0,
		'class':'topcontainer'
	},
	// End item 1
	// Begin item 2
	2:{
		// Code for this item here....
		'top':2, // Notice that this is 2 above the background item... for a nice effect!
		'left':2, // Notice that this is 2 above the background item... for a nice effect!
		'width':150,
		// Set height to 24, so there are 2 pixels of space between the bottom
		// of this item and the bottom of the background item.
		'height':24,
		// Now define subitems for this item, item 2
		'items':{
			// Now, make sure that the subitem positioning starts
			// right below the parent item - so the mouse never
			// moves over the parent's background item.
			'top':26, // 2px padding + 24px height
			'left':2,

			// Define items...
		}
		// End array of items, item 2
	}
	// End item 2
	// End menu, etc
				

So, the old solution worked. It was a little bit ugly, but it worked, and that's the most important thing, right? Right. But the easier a feature is to use, the better. So, as of WebDDM 3.4, we have made backround items a LOT easier to use. And I mean, a lot.

// Begin array of items, level 0
'items':{
	'top':0,
	'left':0,
	
	// Background item
	'background-item':{
		'width':342, 'height':28, 'left': 0, 'top': 5,
		'class':'topcontainer'
	},

	1:{
		// Code for this item here....
		'top':2, // Notice that this is 2 pixels offset inside the background item
		'left':2, // Notice that this is 2 pixels offset inside the background item
		'width':150,
		// Set height to 24, so there are 2 pixels of space between the bottom
		// of this item and the bottom of the background item.
		'height':24,
		// Now define subitems for this item, item 2
		'items':{
			// Now, make sure that the subitem positioning starts
			// right below the parent item - so the mouse never
			// moves over the parent's background item.
			'top':24,
			'left':0,
			
			// Background item
			'background-item':{
				Put background item 2 pixels below parent item.
				So, there is padding between the parent item and
				this set of items, but the menu doesn't close when
				you move between them. Aha!
				'width':342, 'height':215, 'left': 0, 'top': 2,
				'class':'topcontainer'
			},
		}
	}
				

This may be a little hard to understand at first (so many new concepts on this one page!), but after experimenting with it, it will become very simple, and you will agree that it is a very nice, simple, pretty system. Here are some pages that use this system. Note that even if you aren't using an extremely visible background item, you should use background items whenever possible.
Office XP Style
Windows 9x Style
MSDN Style Tutorials: Last - Next