Element.implement(   
{
	
	
	hide: function() 
	{
		//return this.fade('out');
		return this.setStyle('display', 'none');
	},
	
	show: function() 
	{
		this.setStyle('display', '');
		return this.fade('in');
	}
});

var DropdownMenu = new Class({	
	initialize: function(element)
	{
		// grab a link that has the dropdown
		$A($(element).childNodes).each(function(flChild)
		{
			// check if the child is a list item 
			if(flChild.nodeName.toLowerCase() == 'li')
			{
				// if he is get his children
				$A($(flChild).childNodes).each(function(slChild)
				{
					// check if the grandson here is a ul
					if(slChild.nodeName.toLowerCase() == 'ul')
					{
						$(slChild).hide();
						// add mouseover and mouseout events to the parent. this will recursively make each parent show the children on over and hide on out. 
						// i have added the fade effect but u can change the effect to anything 
						flChild.addEvent('mouseover', function()
						{
							slChild.show();
							return false;
						});

						flChild.addEvent('mouseout', function()
						{
							slChild.hide();
						});
						// recursively create the dd object
						new DropdownMenu(slChild);
					}// fi grandchild is a ul
				});// fi slchild
			}// fi child is li
		});// fi function flclind
		return this; // return whatwe created
	}
});