I am new to javascript and am eager to learn. I know I could probably just use jQuery to make this cross-browser but I would like to learn the ins and outs of javascript before abstracting them away.

Our website currently has a navbar that is coded in HTML on every single webpage so changing it means changing every single webpage. So I want to make this more dynamic (and animated) by using javascript.

The problem is that IE is not cooperating. Specifically, IE loads everything alright but does not slide. It just loads the whole submenu instantaneously after a user clicks. Firefox works perfectly. At the top of my test page is a doc type statement inherited from the real index

HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Oddly enough, if I put anything in front of that HTML 4.01 part, it works in IE... If I change it to XHTML or QHTML it will start working. The javascript is below. Basically, it loops through the links array and builds the navbar by creating an unordered list and assigning events. After a user clicks a menu, the page it directs to calls the makeMenu function and the fireMyEvent function to "click" that menu after it is created on the new page. This way I can keep certain submenus open across pages.

Code:
var myDiv;
var topMenuCount=0;
var bottomMenuCount=0;
var links = new Array();

//Example of links, 0 is a parent menu and 1 is a child
links[0]="0|MENUTITLE|link1.htm";
links[1]="1|SUBMENUTITLE|link2.htm";
links[2]="1|SUBMENUTITLE|link3.htm

links[3]="0|MENUTITLE|link4.htm";
links[4]="1|SUBMENUTITLE|link5.htm";
links[5]="1|SUBMENUTITLE|link6.htm
links[6]="1|SUBMENUTITLE|link7.htm

function makeMenu(){

	myDiv = document.getElementById("myDiv");

	for (var i=0; i<links.length; i++){
		var elementInfo=links[i].split("|");
		if(elementInfo[0]=="0"){
			var startList = document.createElement("UL");

			startList.setAttribute("id", "top"+topMenuCount);
			startList.setAttribute("class", "navbar");
			startList.innerHTML = "<a href="+elementInfo[2]+">"+elementInfo[1]+"</a>";
			AddEvent(startList, "mouseup", function(evt){topClicked(evt);}, false);
			myDiv.appendChild(startList);
			topMenuCount++;
		}
		else if(elementInfo[0]=="1"){
			var theList = document.createElement("LI");
			
			theList.setAttribute("id", "low"+bottomMenuCount);
			theList.setAttribute("class", "sub_navbar");
			
			theList.style.display = "none";
			theList.innerHTML = elementInfo[2];
			startList.appendChild(theList);
			bottomMenuCount++;
		}
	}
}

//Cross-browser Function
function fireMyEvent(id, set, type){
	var fireOnThis = document.getElementById(id);
	var evt;
	
	if(document.createEventObject){
		//dispatch for IE
		fireOnThis.fireEvent("on"+type);
	}
	else{
		//Firefox and others
		evt=document.createEvent(set);
		evt.initEvent(type, true, true);
		fireOnThis.dispatchEvent(evt);
	}
}

//Cross-browser Function
function AddEvent(obj, type, listener, useCap){
	if(obj.addEventListener){
	//Firefox and others
		obj.addEventListener(type, listener, useCap);
	}
	else if(obj.attachEvent){
	//IE
		obj.attachEvent("on"+type, listener);
	}
}

//Cross-browser Function
function getTarget(evt){
	var targetElement = null;
	
	//Firefox and others
	if (typeof(evt.target) != "undefined"){
		targetElement = evt.target;
	}
	//IE
	else{
		targetElement = evt.srcElement;
	}
	
	return targetElement;
}

function topClicked(evt){
	var obj=getTarget(evt);
	
	if(obj.tagName=="UL"){
		var objLis = obj.getElementsByTagName("LI");

		//Collapse everything before expanding the ones you want
		//var lis = myDiv.getElementsByTagName("LI");
		//for(var i=0; i<lis.length; i++){
		//	lis[i].style.display = "none";
		//	lis[i].style.height="1px";
		//}
		
		for (var i=0; i<objLis.length; i++){
			objLis[i].style.height = "1px";
			objLis[i].style.display = "block";
			slidedown(objLis[i].getAttribute("id"))
		}
	}
}

//*****************Animated Sliding Menu*****************//

var timerlen = 10;
var slideAniLen = 600;

var timerID = new Array();
var startTime = new Array();
var obj = new Array();
var endHeight = new Array();
var moving = new Array();
var dir = new Array();

function slidedown(objname){
        if(moving[objname]){
                return;
	 }

	 obj[objname] = objname;
        moving[objname] = true;
        dir[objname] = "down";
        startslide(obj[objname]);
}

function startslide(objname){
        var myObj = document.getElementById(obj[objname]);
        endHeight[objname] = 10;
        startTime[objname] = (new Date()).getTime();

        if(dir[objname] == "down"){
                myObj.style.height = "1px";
        }

        timerID[objname] = window.setInterval(function(){slidetick(obj[objname]);}, timerlen);
}

function slidetick(objname){
	 var myObj = document.getElementById(obj[objname]);
        var elapsed = (new Date()).getTime() - startTime[objname];
	 var d=0;
		
        if (elapsed > slideAniLen){
                endSlide(obj[objname])
	 }
        else {
		  var myNum = elapsed / slideAniLen * endHeight[objname];
                d=Math.round(myNum);
                myObj.style.height = d + "px";
        }

        return true;
}

function endSlide(objname){
	 var myObj = document.getElementById(obj[objname]);
        clearInterval(timerID[objname]);
        myObj.style.height = endHeight[objname] + "px";

        delete(moving[objname]);
        delete(timerID[objname]);
        delete(startTime[objname]);
        delete(endHeight[objname]);
        delete(obj[objname]);
        delete(dir[objname]);
		
        return true;
}