Ayuda, menú css con imágenes

[ddest]

Hola, he desarrolado un menú en css y funciona perfectamente en FF pero no así en IE 6, ni IE 7 alguien puede ayudarme?

Código:

<div id="menu">
<ul>
<li>
<a href="#" id="aceite"></a>
<ul class="aceite">
<li>Aceites de Oliva</li>
<li><a href="#">Virgen Extra</a></li>
<li><a href="#">Virgen Extra Ecológico</a></li>
</ul>
</li>
<li>
<a href="#" id="vinos"></a>
<ul class="vinos">
<li><a href="#">Vinos</a></li>
</ul>
</li>
<li>
<a href="#" id="jamon"></a>
<ul class="jamon">
<li class="hdp">Jamón ibérico</li>
<li><a href="#">Bellota</a></li>
<li><a href="#">Recebo</a></li>
</ul>
</li>
<li>
<a href="#" id="quesos"></a>
<ul class="quesos">
<li>Quesos</li>
<li><a href="#">Manchego D.O.</a></li>
<li><a href="#">Puro de oveja</a></li>
</ul>
</li>
<li>
<a href="#" id="aceitunas"></a>
<ul class="aceitunas">
<li><a href="#">Aceitunas</a></li>
</ul>
</li>
<li>
<a href="#" id="dieta"></a>
<ul class="dieta">
<li><a href="#">Dieta mediterránea</a></li>
</ul>
</li>
</ul>
</div>

Hoja de estilos:

#menu {
width: 825px;
height: 261px;
/*margin: 0 auto auto 5%;*/
background-image: url(menu.jpg);
background-repeat: no-repeat;
position:relative;
/*z-index:100;*/
}

#menu ul li a, #menu ul li a:visited {
display:block;
text-decoration:none;
color:#000;
line-height:20px;
font-size:11px;
overflow:hidden;
font-weight: normal;
}
#menu ul {
padding:0;
margin:0;
list-style: none;

}

#menu > ul > li {
float:left;
position:relative;
}
#menu ul li ul {
display: none;
}

#menu ul li:hover ul {
display:block;
position:absolute;
width: 150px;

}
ul.aceite {
top: -30px;
}

ul.vinos {
top: -30px;
left: 50px;
}

ul.vinos li a{
padding-bottom: 50px;
}

ul.jamon {
top: 50px;
left: 155px;
}

.hdp {
position: relative;
left: 30px;

}

ul.jamon li a{
padding-left: 30px;
}

ul.quesos{
top: 30px;
left: 60px;
}

ul.aceitunas{
top: 100px;
left: 50px;

}

ul.aceitunas li a{
padding-top: 20px;
}

ul.dieta{
top: 80px;
left: 140px;
}

#menu ul li ul.dieta li a:link, #menu ul li ul.dieta li a:visited, #menu ul li ul.vinos li a:link, #menu ul li ul.vinos li a:visited, #menu ul li ul.aceitunas li a:link, #menu ul li ul.aceitunas li a:visited {
color:#C00;
font-size: 11px;
font-weight: bold;
line-height:20px;
}


#menu ul li:hover ul li a {
display:block;
color:#333;
}

#menu ul li:hover ul li a:hover {
color:#999;
}

#menu ul li ul li {
color:#C00;
font-size: 11px;
font-weight: bold;
line-height:20px;
}



#menu a#aceite {
width: 258px;
height: 143px;
float: left;
}

#menu a:hover#aceite {
background-image: url(aceite_ov.jpg);
background-repeat: no-repeat;
background-position: -1px -1px;
}

#menu a#vinos {
width: 167px;
height: 143px;
float: left;
}

#menu a:hover#vinos {
background-image: url(vinos_ov.jpg);
background-repeat: no-repeat;
background-position: -1px -1px;
}

#menu a#jamon {
width: 165px;
height: 143px;
float: left;
}

#menu a:hover#jamon {
background-image: url(jamon_ov.jpg);
background-repeat: no-repeat;
background-position: 0px -1px;
}

#menu a#quesos {
width: 425px;
height: 118px;
float: left;
}

#menu a:hover#quesos {
background-image: url(quesos_ov.jpg);
background-repeat: no-repeat;
background-position: 160px -1px;
}

#menu a#aceitunas {
width: 145px;
height: 118px;
float: left;
}

#menu a:hover#aceitunas{
background-image: url(aceitunas_ov.jpg);
background-repeat: no-repeat;

}

#menu a#dieta {
width: 255px;
height: 118px;
float: left;
}

#menu a:hover#dieta{
background-image: url(dieta_ov.jpg);
background-repeat: no-repeat;
background-position: 1px 0px;
}

Muchas gracias!!