Need Help Wite Viewing Site In Ie Navigation fails to work in internet exploder

Well guys most of the time I like to at least try to figure stuff out my self however I have been fighting with this navigation problem for a long time and its really starting to bug me. The problem is that I got it working fine... or so I thought because I was using firefox however when I tested it in IE it failed to work at all. Maybe you guys could be some help.
Place where I originally got the Navigation: http://alistapart.com/article/horizdropdowns
However Im using the Javascript found here: http://forums.xisto.com/no_longer_exists/
Now here is the problem In IE if I dont link to the Javascript you can see it but it dosnt go out to the side like in firefox however if you DO use the javascript link you cant see it at all. Any way Im tottaly stumped Any help would be awesome.
With Out Link to the javascript menu: http://forums.xisto.com/no_longer_exists/
With Link: http://forums.xisto.com/no_longer_exists/

CSS style sheet im linking to:

.navigation {	background-color: #0000FF;}<style>/* Fix IE. Hide from IE Mac */* html ul li { float: left; height: 1%; }* html ul li a { height: 1%; }/* End */ul {	margin: 0;	padding: 0;	list-style: none;	width: 150px;	border-bottom: 1px solid #ccc;	}		ul li {	position: relative;	}		li ul {	position: absolute;	left: 149px;	top: 0;	display: none;	}	ul li a {	display: block;	text-decoration: none;	link color:#FFFFFF;	vlink color:#F2D00D;	color: #FFFFFF;	FONT-SIZE: 25px; 	background: #000099;	padding: 5px;	border: 1px solid #ccc;	border-bottom: 0;	}			li:hover ul, li.over ul { 	display: block; }	.style7 {font-size: 24px}.style8 {font-size: 20px}.style9 {font-size: 22px}li:hover ul ul, li.over ul ul { display:none; } li:hover ul, li li:hover ul, li.over ul, li li.over ul { display: block; } /* The magic *</style>

Any help regarding why this is not working in IE would be awesome. Thanks in advance.
Edited June 26, 2006 by zach101 (see edit history)

Hmm... it looks like the javascript file referred to in nav1.htm...

<script type="text/javascript" src="drop_down.js">

doesn't exist! Could this be the problem?

 

Also, did you include this piece of Javascript to make it work in IE like it says at http://alistapart.com/article/horizdropdowns ? I can't see it anywhere.

 

OK, OK, so that darn IE/Win has to ruin everything and not do as it’s told. IE/Win only allows the :hover pseudo-class to be applied to a link — so the li:hover that makes the sub-menus appear means nothing to IE.A tiny jot of JavaScript is required to kick IE back into action (line wraps marked » — Ed.):startList = function() {if (document.all&&document.getElementById) {navRoot = document.getElementById("nav");for (i=0; i<navRoot.childNodes.length; i++) {node = navRoot.childNodes[i];if (node.nodeName=="LI") {node.onmouseover=function() {this.className+=" over";  }  node.onmouseout=function() {  this.className=this.className.replace»	(" over", "");   }   }  } }}window.onload=startList;

Okay Updates I got the navigation to work in all browsers However the sub menus seem to be centered and dont drop direcetly down from the main menu there hovered from. Seems complicated but when you look at it you will see what I mean because its very ugly and I cant seem to make it just drop straight down from the link there hovered over here is the page:

http://forums.xisto.com/no_longer_exists/

I included all the css right there on the main page so its ez to view. And I got all the information and everything just from the a list apart horizontal drop downs PART ONE so dont go looking at part two and three because that will just confuse and complicate the issue because it SHOULD just work fine with what css is listed on part one. Part two and three are for multple drop down tiers.

Source: http://alistapart.com/article/horizdropdowns

Edited June 26, 2006 by zach101 (see edit history)

Okay nevermind I got it working lol I forgot this:

ul li {	position: relative;	}

Now my next question is wheter or not this is the area in which I style the menu and make it look nice:

ul li a {	display: block;	text-decoration: none;	color: #777;	background: #fff;	padding: 5px;	border: 1px solid #ccc;	border-bottom: 0;	}

It is isnt ? If so I was wondering about a few things First I found out adding Font-Size 25px; will enlarge it and stuff but how can I make the links appear differnt when there visited vs non? Because its a drop down type of thing it is kinda being difficult and the other thing I was wondering is if you click on say Domain names under the services option do just domain names look visted or services to? But then again on a menu Like this should I even have a visited link color? Lastly How do I get the red hover effect he had on his last menu when your cursor goes over a link.

Try adding this to your css file:

ul li a:visited {	color: 000#;	background: #f0f;	}ul li a:hover {	color: 000#;	background: #f00;	}

Place these definitions after the [ ul li a ]. The order is important.

Links, then visited, then hover and active rules in that order or they don't behave properly. LVHA.

Ya that works but its not what I meant because on his when you hover over it just the text highlights red not the entire cell. Making it look alot cleaner and less bulkynvm im an idiot I just needed to take off the bg color

Edited June 27, 2006 by zach101 (see edit history)