window.addEvent('domready', function() {
	var over = function(ul) {
		window.clearTimeout(this.timeout);
		this.addClass('hover');
		ul.tween(1);
	};
	var out = function(ul) {
		window.clearTimeout(this.timeout);
		this.timeout = (function(ul){
			this.removeClass('hover');
			ul.tween(0);
		}).delay(300, this, ul);
	};
	$('topnav').getElements('ul ul').each(function(ul) {
		var li = ul.getParent('li');
		var e = new Element('div', { 'class': 'topnav' });
		e.adopt(ul).inject($(document.body).getElement('div.page'));
		var d = ul.getDimensions();
		e.position({ relativeTo: li, position: 'leftBottom' });
		e.set('tween', { property: 'opacity', duration: 'short', link: 'cancel' });
		e.setStyles({ display: 'block', opacity: 0, width: li.getWidth() + 'px' });
		$$(li, e).addEvent('mouseover', over.bind(li, e));
		$$(li, e).addEvent('mouseout', out.bind(li, e));
	});
});