Menu sbagliato solo su IE6

[pictor]

Ciao,

ho un dropdown menu realizzato coi CSS sul mio sito.

Funziona molto bene su tutti i browser. L'unico problema l'ho con Internet Explorer 5 e 6, dovo le voci di menu non prendono il float e stanno una sotto l'altra anzichè affiancate.

Il markup è semplicemente una Unordered List con <ul> e[*].

Il CSS è

"dynamicMenu.css"

#menu {
    /*
    width: 100%;
    */
    background: #eee;
    float: left;
    
}

#menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    /* width: 12em; */
    float: left;
    z-index: 30;    /* Senza z-index i sottomenu appaiono al di sotto del testo in home page */
    
}

#menu a, #menu h2 {
    font: bold 11px/16px arial, helvetica, sans-serif;
    display: block;
    /*
    border-width: 1px;
    border-style: solid;
    border-color: #ccc #888 #555 #bbb;
    */
    margin: 0;
    padding: 2px 3px;
    
}

#menu h2 {
    /*
    color: #fff;
    background: #000;
    text-transform: uppercase;
    */
    
}

#menu a {
    
    /*color: #000;
    background: #efefef;
    text-decoration: none;
    */
    
}

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

#menu li {position: relative;}

#menu ul ul ul {    /* Dubbio: questo selettore a cosa serve? Agli eventuali menu di terzo livello? */
    position: absolute;
    top: 0;
    left: 100%;
    
    z-index: 10;
    
}

#menu ul ul {
    position: absolute;
    z-index: 50;
    top: 100%;
    left: 0;    /*    Altrimenti su IE7 i sottomenu sono disallineati dal menu */
    
}

div#menu ul ul {
    display: none;

}

div#menu ul li:hover ul
{display: block;}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

body {
    behavior: url(csshover2.htc);
}

#menu a {
    padding-left: 5.5em;
} 

"menu.css"

@import url("dynamicMenu.css");

#menu {
    width: 100%;
    background-color: #2F495D;
    
}

/* Menu principale */

#menu ul {
    position: relative;
    
    list-style: none;
    margin: 0;
    padding: 0;
    
}

#menu ul li, #menu ul li a {
    /* Posizione */
    float: left;
    /*
    height: 20px;
    */
    
    /* Stile */
    padding: 0;
    background-color: #2f495d;
    color: #fff;
    
    font-weight: bold;
    font-size: 90%;
    
}

#menu ul li a {
    /* Stile */
    text-decoration: none;
    padding: 3px 5px;
    margin: 1px;
}

#menu ul li:hover a {
    text-decoration: underline;
}

#menu ul li:hover, #menu ul li:hover a {
    background-color: #B53B48;
    color: #fff;
}

#menu ul li:hover ul, #menu ul li:hover ul li, #menu ul li:hover ul li a {
    background-color: #d7848c;
    color: #fff;
}


/* Sottomenu */

#menu ul ul {
    /* Posizionamento 
    position: absolute;
    right: 10%;
    
    display: none;
    width: 300px;
    */
    /* Stile */
    
}

#menu ul li:hover ul{
    /* Posizionamento */
    display: block;    /* NB: Fa apparire i sottoelementi */
    
}


div#menu ul li ul li:hover {
    background-color: #d7848c;
    font-size: 110%;
}

/* Menu */

li.no_link, li.no_link:hover {
    
}

li.no_link:hover a {
    cursor: default;
    display: none;
    background-color: #20b2aa;
    font-size: 100%;
}

#menu ul ul li {
    clear: both;    /* Altrimenti i menu con il nome troppo corto si accavallano */
}

#menu ul ul {
    border-left: 1px solid #B53B48;
} 

"ie.css"

/* CSS per IE */
    
    body {
        font-size: .8em;
    }
    
    
    /* Menu orizzontale */
    #menu a, #menu li{
        display: inline;
        float: left;
        margin: 1px;
        
        /* 
            Su IE è indispensabile impostare una larghezza fissa.
            Per rednerlo più eterogeneo allora qua si alline il testo al centro
         */
        width: 100px;
        text-align: center;
        
    }
    
    #menu ul ul a{
        /* L'allineamento del testo dei sottomenu però lo vogliamo sempre laterale a sinistra */
        text-align: left;
    
    } 

Come posso risolvere l'anomalia?