Ok, I have this exandable list script that I modified to suit my needs, but its going a bit wonky in IE7 (I don't know about IE6 - haven't tried it on my laptop yet but I'm assuming its as bad or worse)

In Firefox it performs beautifully and just as intended (as far as I've seen) but in IE its not so good.

The issues are:
1. the expanded list doesn't stay in its normal flow - it jumps off to the left, flush with the side of the container.

2. The bottom level still shows the '+' symbol and then loads /pageurl/undefined

It can be seen here: http://potbs.simstressgames.com/recipes/show/219

If you click on the '+' next to the items in the 'Requires' list, you will see what I mean.

The javascript is here:

Code:
<script type = "text/javascript">
	function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			oldonload();
			func();
		}
	}
}
addLoadEvent(collapseMenu);
addLoadEvent(prepareMenu);

function collapseMenu(node) {
	if (!document.getElementById) return false;
	if (!document.getElementById("requires")) return false;
	if (!node) node = document.getElementById("requires");

	if (node.childNodes.length > 0) {
		for (var i=0; i<node.childNodes.length; i++) {
			var child = node.childNodes[i];
			if (child.nodeName == "UL") {
					child.style.display = "none";
			}
			collapseMenu(child);
		}		
	}

}

function prepareMenu() {
	if (!document.getElementById || !document.getElementsByTagName) return false;
	if (!document.getElementById("requires")) return false;

	var links = document.getElementById("requires").getElementsByTagName("li");
	for (var i=0; i<links.length; i++) {
	  	if(links[i].childNodes.length>2)
		  {
		    links[i].innerHTML = ' <a href = "#" onclick = "toggleMenu(this.parentNode.getElementsByTagName(\'UL\')[0],this.href);return false;">+</a> '+links[i].innerHTML;
		  }
		  else
		  {
		    links[i].innerHTML = '&nbsp;&nbsp;&nbsp;'+links[i].innerHTML;
		}		

	}
}

function toggleMenu(node, link) {
	if (!document.getElementById) return false;
	if (!link) return false;
	if (!node) location.href = link.href;

	// Collapse all nodes, and only show clicked node (when clicking top level of menu)
	//if (node.parentNode.parentNode.id == "requires") {
	//	hideTopLevels();
	//}
	
	if (node.style.display == "") {
		Effect.BlindUp(node, {duration: 0.2});
	} else {
		Effect.BlindDown(node, {duration: 0.2});
	}
}

function hideTopLevels() {
	if (!document.getElementById) return false;
	if (!(node = document.getElementById("requires"))) return false;	
	
	if (node.childNodes.length > 0) {
		for (var i=0; i<node.childNodes.length; i++) {
			var child = node.childNodes[i];
			for(var j=0; j<child.childNodes.length; j++) {
				var grandchild = child.childNodes[j];
				if (grandchild.nodeName == "UL") {
					if (grandchild.style.display == '') {
						Effect.BlindUp(grandchild, {duration: 0.2});
					}
				}
			}
		}		
	}
}

</script>