Menu Dropdown com problema no IE8

Meus amigos, venho recorrer ao conhecimento dos amigos para resolver mais uma questão que esta me deixando mais ainda sem cabelos, rsrs.

Vejam a imagem o que esta ocorrendo com o meu menu.

/applications/core/interface/imageproxy/imageproxy.php?img=http://img844.imageshack.us/img844/1385/menuerro.jpg&key=1b050c43187eda2d66c0ff36f7a025de7b0f85ab9729f1bf2d5fede4514f4336" alt="menuerro.jpg" />

Lembrando...

O menu funciona 100% nos navegadores: Firefox V4.0.1, Google Chrome V12. O único problema vem da porcaria do IE8 que tenho no PC..

Vamos ao código.

Código do CSS:

<style type="text/css">
body {

text-align:left;
}

a, a:hover, a:active, a:focus {

outline:0;
direction:ltr;
}

.wrapper {
position:relative; height:25px;
text-align:left;
}

.mainmenu {
position:absolute;

/ z-index: 999; /

font-family:Verdana, Geneva, sans-serif;
font-weight:normal;
font-size:90%;
line-height:25px;
left:50%;
margin-left:-400px;
width:745px;
}

ul.menu {

padding:0;
margin:0;
list-style:none;
width:150px;
overflow:hidden;
float:left;
margin-right:0px;
}

ul.menu a {

background: #F90;
text-decoration:none;
color:#fff;
padding-left:5px;
}

ul.menu li.list {

float:left;
width:250px;
margin:-32767px -125px 0px 0px;

/ background:url(images/top1.png) no-repeat left bottom; /
}

ul.menu li.list a.category {

position:relative;
z-index:50;
display:block;
float:left;
width:120px;
margin-top:32767px;
background:transparent;
}

ul.menu li.list a.category:hover,
ul.menu li.list a.category:focus,
ul.menu li.list a.category:active {

margin-right:1px;
background-image:url(images/tophover1.png);
background-repeat:no-repeat;
background-position:left top;

}

ul.submenu {

float:left;
padding:25px 0px 0px 0px;
margin:0;
list-style:none;
background-image:url(images/tophover1.png);
background-repeat:no-repeat;
background-position:left top;
margin:-25px 0px 0px 0px;
}

ul.submenu li a {

float:left;
width:120px;
background: #F90;
clear:left;
color: #006;
font-size:10px;
}

ul.submenu li a.endlist {

background:url(images/bottom1.png);
}

ul.submenu li a.endlist:hover,
ul.submenu li a.endlist:focus,
ul.submenu li a.endlist:active {

background:url(images/bottomhover1.png);
}

ul.submenu a:hover,
ul.submenu a:focus,
ul.submenu a:active {

background:#900;
margin-right:1px;
color:#fff;
}

* html ul li { float: left; }
* html ul li a { height: 1%; }

img {

border:0px;
}
</style>

Código do HTML do menu:

<div class="wrapper">
 <div class="mainmenu">
 <ul class="menu">
 <li class="list"><a class="category" href="#"><img src="../img/bt_home.jpg" alt="Home" width="140" height="28" /></a></li>
 </ul>
 <ul class="menu">
 <li class="list">
 <a class="category" href="#"><img src="../img/bt_adicionar.jpg" alt="Adicionar" width="140" height="28" /></a>
 <ul class="submenu">
 <li><a href="#">Sub Item1</a></li>
 <li><a href="#">Sub Item2</a></li>
 <li><a href="#">Sub Item3</a></li>
 <li><a href="#">Sub Item4</a></li>
 <li><a href="#">Sub Item5</a></li>
 </ul>
 </li>
 </ul>
 <ul class="menu">
 <li class="list">
 <a class="category" href="#"><img src="../img/bt_pesquisar.jpg" alt="Pesquisar" width="140" height="28" /></a>
 <ul class="submenu">
 <li><a href="#">Sub Item1</a></li>
 <li><a href="#">Sub Item2</a></li>
 </ul>
 </li>
 </ul>
 <ul class="menu">
 <li class="list">
 <a class="category" href="#"><img src="../img/bt_logoff.jpg" alt="Logoff" width="140" height="28" /></a>
 </li>
 </ul>
 </div>
</div>

Estou salvando esse codigo na extenção php. Mas acho que não tem problema não ne??

Agradeço a atenção de todos, forte abraço.