Überblendende Navileiste

[Setsh]

Hallo zusammen,
 hab ein riesen Problem. Es geht um ein Javascript, welche meine Navi auf der Homepage so verändern soll. Das es wie folgt aussieht:
Ich habe Mainnavipunkte und Subnavipunkte,
die Subnavipunkte liegen unter mehreren Mainnavipunkten.
Die Subnavipunkte sollen beim laden der Seite nicht sichtbar sein und erst sichtbar werden, wenn man mit der Mouse über die Mainnavipunkte geht und dann natürlich die anderen Subnavis, die unter anderen Mainnavipunkten liegen, nicht angezeigt werden.

Dies Funktionier auch im Firefox, Opera und Safari. Aber nicht im Internet Explorer.

Hier mal meine Javascript Datei:

function InitNavi()  
{  
    // Eine Liste mit allen Navielementen erstellen.  
    var Liste = document.getElementById('block-menu-menu-mainnavigation').getElementsByTagName("ul");  
  
    for (var I = 0; I < Liste.length; I++)  
    {  
        // Überprüfen, ob das Element zur Klasse "menu" gehört und sich innerhalb eines <li> befindet.  
        if(Liste[I].getAttribute('class') == 'menu' && Liste[I].parentNode.nodeName == 'LI')  
        {  
            Liste[I].style.display = 'none';  
            Liste[I].parentNode.setAttribute('onmouseover', 'OpenNavi(' + I + ')');  
        }  
    }  
}  
  
function OpenNavi(Index)  
{  
    // Eine Liste mit allen Navielementen erstellen.  
    var Liste = document.getElementById('block-menu-menu-mainnavigation').getElementsByTagName("ul");  
  
    for (var I = 0; I < Liste.length; I++)  
    {  
        // Überprüfen, ob das Element zur Klasse "menu" gehört und sich innerhalb eines <li> befindet.  
        if (Liste[I].getAttribute('class') == 'menu' && Liste[I].parentNode.nodeName == 'LI')  
        {  
            Liste[I].style.display = 'none';  
        }  
    }  
  
    // Das Element sichtbar machen.  
    Liste[Index].style.display = 'block';  
}

Bitte um Hilfe und hoffe auf eine Lösung