Previously posted about the reverse but took some advice and developed for the othertype of browsers. Now in IE my code doesn't look so hot.

I am trying to create a menu bar with a list dropdown. Not too sure where IE is reading this wrong.

Testing Page:
http://www.cyclonicvacuum.com/dhtml/sitemap.html

Main code
Code:
<ul id="nav">
  <li><a href="http://www.cyclonicvacuum.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('home','','../images/buttons/homeOver.gif',1)"><img src="../images/buttons/home.gif" name="home" width="35" height="20" border="0"></a></li>

  <li><a href="http://www.cyclonicvacuum.com/dysonstory.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('dysonStory','','../images/buttons/dysonstoryOver.gif',1)"><img src="../images/buttons/dysonstory.gif" name="dysonStory" width="38" height="20" border="0"></a> </li>
  <li class="rootcyclone"><a href="http://www.cyclonicvacuum.com/rootcyclone.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('rootcyclone','','../images/buttons/rootcycloneOver.gif',1)"><img src="../images/buttons/rootcyclone.gif" name="rootcyclone" width="86" height="20" border="0"></a></li>
  <li><a href="http://www.cyclonicvacuum.com/dysonvacuum.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('products','','../images/buttons/productsOver.gif',1)"><img src="../images/buttons/products1.gif" name="products" width="55" height="20" border="0"></a> 
            <ul>
              <li><a href="/dc07-all-floors.html">Dyson DC07 All Floors</a></li>
              <li><a href="/dc07-all-floors-refurbished.html">Dyson DC07 - Factory 
                Reconditioned</a></li>
              <li><a href="/dc07-low-reach.html">Dyson DC07 Low Reach</a></li>
              <li><a href="/dc07-low-reach-refurbished.html">Dyson DC07 Low Reach 
                - Factory Reconditioned</a></li>
              <li><a href="/dc07-full-kit.html">Dyson DC07 Full Kit</a></li>
              <li><a href="/dc07-animal.html">Dyson DC07 Animal</a></li>
              <li><a href="/dc07-animal-refurbished.html">Dyson DC07 Animal - 
                Factory Reconditioned</a></li>
              <li><a href="/dc07-full-gear.html">Dyson DC07 Full Gear</a></li>
              <li><a href="/dc11-all-floors.html">Dyson DC11 All Floors</a></li>
              <li><a href="/dc11-full-gear.html">Dyson DC11 Full Gear</a></li>
              <li><a href="/dc14-low-reach.html">Dyson DC14 Low Reach</a></li>
              <li><a href="/dc14-animal.html">Dyson DC14 Animal</a></li>
              <li><a href="/dc14-full-gear.html">Dyson DC14 Full Gear</a></li>
            </ul>
  </li>
  <li class="ourcompany"><a href="http://www.cyclonicvacuum.com/company.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('company','','../images/buttons/ourcompanyOver.gif',1)"><img src="../images/buttons/ourcompany.gif" name="company" width="87" height="20" border="0"></a></li>
  <li><a href="http://www.cyclonicvacuum.com/contact.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('contact','','../images/buttons/contactOver.gif',1)"><img src="../images/buttons/contact.gif" name="contact" width="48" height="20" border="0"></a></li>
  <li class="policy"><a href="http://www.cyclonicvacuum.com/policy.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('policy','','../images/buttons/policyOver.gif',1)"><img src="../images/buttons/policy.gif" name="policy" width="39" height="20" border="0"></a></li>
  <li><a href="http://www.cyclonicvacuum.com/warranty.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('warranty','','../images/buttons/warrantyOver.gif',1)"><img src="../images/buttons/warranty.gif" name="warranty" width="58" height="20" border="0"></a></li>
</ul>
Code:
a:link { text-decoration:none}
a:visited { text-decoration:none}

body {
	font-family: arial, helvetica, serif;
}

#nav, #nav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
	background: #fff; /* IE6 Bug */
}

#nav a {
	display: block; /* The element will be displayed as a a block-level element */
	width: 26em; /* makes the text bigger in submenu*/
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #999999;
	text-indent: 5px;
}

#nav a.titles {
	display: block;
	width: 1em;
}

#nav a.title_oc {
	display: block;
	width: 8em;
}

#nav li { /* all list items */
	float: left;
	width: 4em; /* width needed or else Opera goes nuts */
	/* border-bottom: 1px solid #ccc; */
	display: block;
}

#nav li.rootcyclone { /* rootcyclone list item */
	float: left;
	width: 6em; /* width needed or else Opera goes nuts */
	display: block;
}

#nav li.ourcompany { /* outcompany list items */
	float: left; 
	width: 6em; /* width needed or else Opera goes nuts */
	display: block;
}

#nav li.policy { /* outcompany list items */
	float: left; 
	width: 3em; /* width needed or else Opera goes nuts */
	display: block;
}

#nav li ul { /* second-level lists - aka drop down list */
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff; /* IE6 Bug */
	border: 1px solid #ccc;
	/* border-bottom: 0; */
	/*border-bottom: 1px solid #ccc;  put in li ul li instead */
	position: absolute;
	width: 18em; /* makes the box bigger but not the actual text */
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	line-height: 18px;
}

ul li a:hover { color: #E2144A; } /* Hover Styles - top menu only */
li ul a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles - drop down list */

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}

#nav li ul li { /* solved the dropdown from piling up on each other.*/
	float: none;
	border-bottom: 1px solid #ccc;
	width: 18em;
}

#content {
	clear: left;
	color: #ccc;
}
Is it possible I get an error because I am using two .css files?
Thanks in advance for your help.