function gapsX(elem){
	return !elem.offsetParent ? elem.offsetLeft : ( elem.offsetLeft + gapsX(elem.offsetParent) ); 
}
window.onload = function() {
    var ul = document.getElementById("nav");
	var lis = document.getElementById("nav").getElementsByTagName("li");
	for(var i=0; i<lis.length; i++){
		lis[i].onmouseover=function(){
			if(this.getElementsByTagName('div').length <= 0){
				return false;
			}else{
				var as = this.getElementsByTagName('a');
				this.getElementsByTagName('div')[0].style.width = 67*as.length -57 + 'px';
				this.className+=(this.className.length>0?" ":"") + "show";
				this.getElementsByTagName('div')[0].style.left = -(gapsX(this)-gapsX(ul))*(67*as.length -57 - 100)/(9*100 +9) - 12 + 'px';
			}
		}
		lis[i].onmouseout=function(){
			this.className=this.className.replace(new RegExp("( ?|^)show\\b"), "");
		}
	}
}