I have been working on this for the past few days. Finally have it working in IE7 and FF, but the whole navigation blows up in IE6. Even the original horizontal list is showing vertical and the width that is specified for the menu is ignored. How can I fix this and can someone tell me how to find problems like this?

CSS:
#mainnav ul li ul.yourhearing{
padding-top:96px;
width:160px;
background-image:url(../images/crowd.jpg);
background-repeat:no-repeat;
background-position:0 27px;
}
#mainnav ul li ul.care{
padding-top:96px;
width:160px;
background-image:url(../images/couple.jpg);
background-repeat:no-repeat;
background-position:0 27px;
}
#mainnav ul li ul.products{
padding-top:96px;
width:160px;
background-image:url(../images/convertable.jpg);
background-repeat:no-repeat;
background-position:0 27px;
}
#mainnav ul li ul.about{
padding-top:96px;
width:160px;
background-image:url(../images/convertable.jpg);
background-repeat:no-repeat;
background-position:0 27px;
}
#mainnav{
position:absolute;
top:22px;
left:290px;
padding: 0;
margin: 0;
list-style: none;

}
#mainnav ul{
padding:0;
margin:0;
list-style-type:none;
}
#mainnav li{
float:left;
width:8em;
height:40px;
text-align:center;
}
#mainnav li ul {
position: relative;
width: 10em;
left: -999em;
clear:left;
float:left;
margin:0 -100px -999px 0;

}
#mainnav li ul li{
background-image:url(../images/bgnav.jpg);
background-repeat:repeat-x;
width:160px;
line-height:40px;
border:#FFFFFF solid 1px;
float:left;
}

#mainnav li ul li ul{
width:160px;
clear:left;
margin-left:150px;
}
#mainnav li ul ul {
margin: -1em 0 0 10em;
}

#mainnav ul li img{
visibility:hidden;
margin:0 -100px 0 0;
position:relative;
top:20px;
float:left;
}
#mainnav ul li:hover{
visibility:visible;
}
#mainnav li ul li:hover,
#mainnav li ul li.sfhover{
position:relative;
left:auto;
color:#F7C106;
background-image:url(../images/bgnavhover.jpg);
background-repeat:repeat-x;
}
#mainnav li:hover ul, #mainnav li.sfhover ul {
position:relative;
left:auto;
color:#F7C106;
background-image:url(../images/bgnavhover.jpg);
background-repeat:repeat-x;
}
#mainnav li:hover ul ul, #mainnav li.sfhover ul ul {
left: -999em;
}
#mainnav li:hover ul, #mainnav li li:hover ul, #mainnav li.sfhover ul, #mainnav li li.sfhover ul {
left: auto;
}
#mainnav li:hover ul ul, #mainnav li:hover ul ul ul, #mainnav li.sfhover ul ul, #mainnav li.sfhover ul ul ul {
left: -999em;
}

#mainnav li:hover ul, #mainnav li li:hover ul, #mainnav li li li:hover ul, #mainnav li.sfhover ul, #mainnav li li.sfhover ul, #mainnav li li li.sfhover ul {
left: auto;
}

#mainnav a{
display:block;
text-decoration:none;
font-size:1em;
font-weight:bold;
color:#000000;
height:11px;

}

HTML:
<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("mainnav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>

<div id="mainnav">
<ul>
<li><a href="http://www.earcare.us" title="Hearing By Design Home Page">Home</a></li>
<li><a href="yourhearing.shtml" title="Your Hearing">Your Hearing</a>
<ul class="yourhearing">
<li><a href="causes.shtml" title="Causes of Hearing Loss">Causes >></a>
<ul>
<li><a href="types.shtml" title="Types of Hearing Loss">Types</a></li>
<li><a href="degrees.shtml" title="Degrees of Hearing Loss">Degrees</a></li>
</ul>
</li>
<li><a href="symptoms.shtml" title="Symptoms of Hearing Loss">Symptoms</a></li>
<li><a href="treatment.shtml" title="Treatment of Hearing Loss">Treatment >></a>
<ul>
<li><a href="solutions.shtml" title="Solutions for Hearing Loss">Solutions >></a>
<ul>
<li><a href="expect.shtml" title="What to Expect from Hearing Loss Solutions">What to Expect</a></li>
<li><a href="advice.shtml" title="Professional Advice for Hearing Loss">Professional Advice</a></li>
</ul>
</li>
<li><a href="help.shtml" title="Help a Family Member Deal with Hearing Loss ">Help Loved Ones >></a>
<ul>
<li><a href="strategies.shtml" title=" loss">Strategies</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>

<li><a href="products.shtml" title="Hearing Products">Products</a>
<ul class="products">
<li><a href="devices.shtml" title="Hearing Aid Devices">Hearing Devices >></a>
<ul>
<li><a href="zon.shtml" title="Zon Hearing Aids">Zon</a></li>
<li><a href="destiny.shtml" title="Destiny Hearing Aids">Destiny</a></li>
</ul>
</li>
<li><a href="protection.shtml" title="Hearing Protection">Hearing Protection</a></li>
<li><a href="communications.shtml" title="Communications">Communications</a></li>
<li><a href="music.shtml" title="Hearing Music">Music</a></li>
</ul>
</li>
<li><a href="care.shtml" title="Care and Maintenance of Hearing Instruments">Use &amp; Care</a>
<ul class="care">
<li><a href="maintenance.shtml" title="Care and Maintenance for Hearing Aids">Care &amp; Maintenance</a></li>
<li><a href="batteries.shtml" title="Hearing Aid Batteries">Batteries</a></li>
<li><a href="warranty.shtml" title="Hearing Aid Warranties">Warranty Plans</a></li>
</ul>
</li>
<li><a href="about.shtml" title="Contact Hearing By Design">About Us</a>
<ul class="about">
<li><a href="staff.shtml" title="Staff for Hearing By Design">Staff >></a>
<ul>
<li><a href="richardgiles.shtml" title="Richard Giles">Richard Giles</a></li>
<li><a href="jimburns.shtml" title="Jim Burns">Jim Burns</a></li>
<li><a href="dianehoffestter.shtml" title="Diane Hoffestter">Diane Hoffestter</a></li>
</ul>
</li>
</ul>
</li>
</ul>

I have validated both the CSS and the HTML

Thanks
Dotty