Implementing CSS Dropdown Troubles

[U][COLOR=red]Overview[/COLOR][/U]
I originally created a CSS based dropdown dropdown to accomodate a user who at the last minute decided to include 3 more options, instead of just one buy button. When i tested it, it failed miserably in IE, i then browsed the web and came across some sites that gave me IE fixes for those issues. I then modified there code a smidge to meet the criteria i needed, but i’m having some trouble now, when implementing it into an already exsisting page (which was badly formatted i might add, im going blind looking through this). Here is the HTML :

<table border=”0″ align=”right” cellpadding=”0″ cellspacing=”0″>
<tr>
<td align=”right”>
<ul id=”nav”>
<li><ahref=”” target=”new”><img src=”../images/button_buy.gif”
border=”0″ width=”46″ height=”15″ alt=”” align=”right”></a>
<ul>
<li><a href=”” target=”new”><img
src=”../images/barnesandnoble.gif” border=”0″
width=”90″ height=”20″ alt=”Click Here to purchase this
item from Barnes & Noble”></a></li>
<li><a href=”” target=”new”><img src=”../images/amazon.gif”
border=”0″ width=”90″ height=”18″ alt=”Click Here to
purchase this item from Amazon”></a></li>
<li><a href=”” target=”new”><img
src=”../images/amazonca.gif” border=”0″ width=”80″
height=”23″ alt=”Click Here to purchase this item from
Amazon Canada”></a></li>
</ul>
</li>
</ul>
</td>
<td><img src=”../images/spacer.gif” width=”4″ height=”1″ alt=””></td>

<td valign=”bottom”><A HREF=”” border=”0″><IMG
src=”../images/button_more.gif” border=”0″></A></td>
</tr>
</table>

[U][COLOR=red]Freakin Bugs[/COLOR][/U]
I’ve used a linked button image as the first <li>. Then there is a sub <ul> with 3 <li>’s that contain images as there content. I’m using firefox, and i downloaded the “web developer” extension (which is really quite useful). It outlines block level elements, so that you can see the space alloted. When i do this it shows that the parent <ul> is spaced far to the left of the first button image with the dropdown. I’ve been trying for a quite a while now, and cannot figure it out. Here is my CSS code :

/* BEGIN CSS CODE */
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 0;
width: 90px;
}

#nav a {
display: block;
width: 90px;
margin-top: 5px;
}

#nav li {
float: left;
width: 90px;
}

#nav li ul {
position: absolute;
width: 90px;
left: -999em;
border: 1px solid #69B1C9;
padding: 5px;
padding-top: 1px;
}

#nav li:hover ul {
left: auto;
}

#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
/* END CSS CODE */

[U][COLOR=red]Another IE Issue[/COLOR][/U]
Naturally i’m having some trouble with IE. I’m using the following javascript:

<!–BEGIN JAVASCRIPT FIX FOR IE –>
<script type=”text/javascript”><!–//–><![CDATA[//><!–

sfHover = function() {
var sfEls = document.getElementById(“nav”).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(” sfhoverb”), “”);
}
}
}
if (window.attachEvent) window.attachEvent(“onload”, sfHover);

//–><!]]></script>
<!–END JAVASCRIPT FIX FOR IE –>

which fixes most of the issues. However one problem persists: There is space inbetween where the first <li> meets the nested <ul>. This problem doesn’t occur in Firefox and Netscape. I’ve been toying with the CSS code and failing miserably. Any possible fixes for this?

God i wish we could start developing with web standards. Thanks for any help you guys can offer. (damn that was long)

Also in #CSS _↴