Sto cercando di creare un menu orizzontale con sottomenu a tendina su un portale.

Ho preso gli stili da questo tutorial, li ho modificati (ho solo tolto un livello di <ul>) e funziona tutto.

Tutto meno che su Internet Explorer, ovvio ....

Su FireFox, Opera e IE7 il menu orizzontale va bene.
Su IE6 invece sembra fregarsene del float degli elementi[*] e me lo mostra sempre verticalmente.

Ho provato di tutto ma non riesco a risolvere.
E il problema è che quando riesco a metterlo anche su IE6, mi si presenta un bug che mi mostra tutto uno sfondo bianco al menu (che ovviamente sui compliant browser non c'è).

Non sono riuscito a identificare il bug

Aiutatemi voi vi prego!

Il menu è così strutturato:
codice:
<div id="menuUp">
  <ul>[*]<a>Menu 1</a>[*]<a>Menu 2</a>[*]<a>Menu 3</a>[*]
       <ul>[*]<a>SottoMenu 1</a>[*]<a>SottoMenu 2</a>[*]<a>SottoMenu 3<a>[/list]
     [/list]
</div>
Mentre i CSS sono questi:
codice:
#menuUp {

}

#menuUp ul {
list-style: none;
margin: 0;
padding: 0;

}

#menuUp a, #menuUp h2 {
display: block;

margin: 0;
padding: 2px 3px;

font: bold 11px/16px arial, helvetica, sans-serif;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
}

#menuUp a {
color: #000;
background: #efefef;
text-decoration: none;
}

#menuUp a:hover {
color: #a00;
background: #fff;
}

#menuUp ul ul {
position: absolute;
top: 0;
left: 0;
}

#menuUp li {position: relative; float: left;}

#menuUp ul ul {
position: absolute;
top: 100%;
left: 0;
width: 100%;
}

#menuUp ul ul,
#menuUp ul li:hover ul ul
{display: none;}

#menuUp ul li:hover ul,
#menuUp ul ul li:hover ul
{display: block;}