Deklaration einer Variablen/Ansprechen eines html-Tags

[Caro]

Hallo Leute,

ich habe folgendes Problem:

Ich bastel im Moment eine Seite, bei der die Navigation oben horizontal angezeigt werden soll. Es handelt sich dabei um zwei ineinander verschachtelte Listen.

<ul>
    <li>1</li>
    <li>2
        <ul>
            <li>2.1</li>
            <li>2.2</li>
        </ul>
    </li>
</ul>

2.1 und 2.2 sollen erst erscheinen, wenn man mit der Maus über Punkt 2 fährt. Die einzelnen Punkte/Links sind aber kein Text, sondern Buttons.

Bis hierher kein Problem, denn das habe ich mit CSS gelöst. Im Mozilla Firefox wird die Navigation richtig angezeigt. Im IE7 funktioniert dies allerdings nicht.

Ich habe mich bereits durch die SELFHTML-Doku gewühlt und bin auf die Star-Plus-HTML-Hacks gestoßen, die ja eigentlich für den IE7 da sein sollen. Dies funktioniert leider nicht.

Also habe ich für den IE7 eine andere Lösung in JavaScript geschrieben bzw. zusammengesucht. Nun funktioniert die Navigation auch im IE7, nur habe ich jetzt Lücken zwischen den Listenpunkten 2.1 und 2.2.

Ich weiß auch, wie ich das Problem beheben kann. Ich muss nur für 2.1 und 2.2 margin und padding auf 0 setzen.

Jetzt das Problem: Ich weiß nicht, wie ich deklarieren muss, um genau die "li" von 2.1 und 2.2 ansprechen zu können.

Hier der entsprechende Quellcode:

<script type="text/javascript">
if(window.navigator.systemLanguage && !window.navigator.language)
{
    function hoverIE()
    {
        var LI = document.getElementById("Navigation").firstChild;
        do
        {
            if (sucheUL(LI.firstChild))
            {
                LI.onmouseover=einblenden;
                LI.onmouseout=ausblenden;
            }
        LI = LI.nextSibling;
        }
        while(LI);
    }

function sucheUL(UL)
    {
        do
        {
            if(UL) UL = UL.nextSibling;
            if(UL && UL.nodeName == "UL") return UL;
        }
        while(UL);
        return false;
    }

function einblenden()
    {
        var UL = sucheUL(this.firstChild);
        UL.style.display = "block"; UL.style.backgroundColor = "#f00";
 UL.style.left = "5";
    }

function ausblenden()
    {
        sucheUL(this.firstChild).style.display = "none";
    }

window.onload=hoverIE;
}
</script>

Liege ich mit meinen Behauptungen eigentlich richtig?

Für Eure Hilfe wäre ich euch sehr dankbar, denn so langsam aber sicher kann ich diesen Quellcode nicht mehr sehen ;-).