uitklapmenu met foto's en css

Hoi,

Ik heb een vraag over het maken van een uitklap menu.. Het gaat om het volgende want hij werkt prima in IE en firefox maar heeft uiterlijke verschillen. Het is de bedoeling dat als men over een foto heen gaat er een menuutje onder komt. Als het met tekst kan, dan kan het ook met foto's dacht ik.. Het werkt met de hover, ul en li maar in IE maakt ie de achter grond van het menuutje net iets te groot (dit gebeurd niet in firefox)
Heeft iemand enig idee hoe ik dit kan oplossen.. hieronder css stukje en script stukje in mijn php pagina.

Alvast bedankt

----------------------------------------
style.css

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

#nav a {
display: block;
width: 2em;
}

#nav a:link {
color: black;
font-family: Arial Rounded MT Bold normal;
font-weight: bold;
text-decoration: none;
}

#nav a:hover {
color: black;
font-family: Arial Rounded MT Bold normal;
font-weight: bold;
text-decoration: none;
}

#nav a:visited {
color: black;
font-family: Arial Rounded MT Bold normal;
font-weight: bold;
text-decoration: none;
}

#nav a:active {
color: black;
font-family: Arial Rounded MT Bold normal;
font-weight: bold;
text-decoration: none;
}

#nav li {
float: left;
width: 8em;
}
#nav li ul {
position: absolute;
background-color: #99CCFF;
width: 8.5em;
left: -999em;
}

#nav li:hover ul {
background-color: #99CCFF;
}
#nav li:hover ul, #nav li.sfhover ul {
background-color: #99CCFF;
left: auto;
width: 9.5em;

en het scriptje:

<script language="JavaScript">
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(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

<ul id="nav">
<li><a href="?page=default"><img src="images/ontwerp.jpg" width="150" height="170" /></a>
<ul>
<?php
if (mysql_num_rows($resultaat) > 0)
{
while ($rij = mysql_fetch_array($resultaat))
{
echo "<li><a href=index.php?page=default&page2=vragen&fase=1&id=".$rij["categorie_CatNr"].">".$rij["categorie_Categorie"]."</a></li>";
}
}
?>
</ul>
</li>

<li><a href="?page=default"><img src="images/aanbesteding3.jpg" width="150" height="170" /></a>
<ul>
<?php
if (mysql_num_rows($resultaat1) > 0)
{
while ($rij1 = mysql_fetch_array($resultaat1))
{
echo "<li><a href=index.php?page=default&page2=vragen&fase=2&id=".$rij1["categorie_CatNr"].">".$rij1["categorie_Categorie"]."</a></li>";
}
}
?>
</ul>
</li>
</ul>