Mystery Bug IE 6.0 For Drop Down Menu

Hey folks! So I'm a dinosaur of design trying to get up to speed and learn CSS. I started designing a drop down menu inspired by A List Apart's code which is actually for a vertical menu despite stating that it is horizontal. I'm trying to design a truly horizontal one so have made some changes to the code. My first fail occured when trying to use divs and floats for the menu itself. Couldn't get that to work so I gave in and used a table. Now the code works fine (more or less) in Mozilla but in IE 6 does a bunch of crazy stuff. I've heard of drio down menus working strangely in IE 6 before, but am not sure what can be done to help. Any ideas? Anyone know of a good fix for this? Sorry my code probably looks ridiculous but I am 100% new to css. Code behind

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

td {margin:0}

ul li {
	position: relative;
	}

li ul {
	position: absolute;
	display: none;
	}
ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	float:left;
	background: #fff;
	padding: 5px;
	border-bottom: 0;
	}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	}

li:hover ul { display: block; }
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;

li:hover ul, li.over ul { 
	display: block; }
	/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
</style>

</head>

<body>
<table width="400px" height="18px">
<tr>
<td>

<ul>
  <li><img src="file:///C|/Documents and Settings/M-Chan/My Documents/CafePress/images/images/menu_01.gif" width="121" height="18" />
  	<ul>
		<li>Product1</li>
		<li>Product2</li>
		<li>Product3</li>
		<li>Product4</li>
    </ul>
	</li>
	</ul>

</td>
<td>

<ul>
	<li><img src="file:///C|/Documents and Settings/M-Chan/My Documents/CafePress/images/images/menu_02.gif" width="99" height="18" />
		<ul>
			<li>Style1</li>
			<li>Style2</li>
			<li>Style3</li>
			<li>Style4</li>
		</ul>
	</li>
</ul>

</td>
<td width="103" height="18">
<img src="file:///C|/Documents and Settings/M-Chan/My Documents/CafePress/images/images/menu_03.gif" width="108" height="18" /></td>
<td width="77" height="18">
<img src="file:///C|/Documents and Settings/M-Chan/My Documents/CafePress/images/images/menu_04.gif" width="72" height="18" /></td>
</tr>
</table>
</body>
</html>

Follow us:

Applications

COMPANY

PRODUCTS

COMMUNITY

CHOOSE LANGUAGE