hawkmaster: Hover für seitliches CSS Menü? Self Script erweitern

Hallo zusammen,
ich versuche mich seit ein paar Tagen an einem CSS Menü das auf ein Self Beispiel aufbaut.
Es ist ein horizontales Menü mit einer 3 Ebene die beim Überfahren nach rechts sichtbar wird.
Soweit klappt alles (IE7 und FF)
Laut Self braucht man ja für den IE6 (und älter) ein bischen Javascript um den Hover Effekt für Listen nachzubilden.
Mit dem kleinen Script "hoverIE" funktioniert dies auch gut im IE6.
Aber nur für die Menüs der 2 Ebene, also die wo nach unten aufklappen.
Die seitlichen Menüs (in meinem Beispiel "Seite 4_b1, Seite 4_b2) werden nicht  angezeigt.
Kann mir jemand einen Ansatz geben ob und wie man die Funktion "hoverIE" erweitern könnte. Mir ist das noch ein wenig zu hoch ;-)

Hier meine Versuche:
##################################
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynamisch Navigationsleisten einblenden</title>
<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 = "#FFCC33";
  }
  function ausblenden() {
    sucheUL(this.firstChild).style.display = "none";
  }

window.onload=hoverIE;
}
</script>

<style type="text/css">
  body {
    font: normal 100.01% Helvetica, Arial, sans-serif;
    color: black; background-color: #ffffe0;
  }
  ul#Navigation, ul#Navigation ul {
    margin: 0;
 padding: 0;
    text-align: center;
 position: absolute;
 z-index: 1;
  }
  ul#Navigation li {
    list-style: none;
    float: left;
 position: relative;
 padding: 0;
  }
  ul#Navigation li ul {
   margin: 0; padding: 0;
    left: -0.01em;
    display: none;  /* Unternavigation erste Ebene ausblenden */
 z-index: 2;
  }

* html ul#Navigation li {  /* Korrektur fuer den IE 5 und 6 */
    margin-bottom: -0.4em;
  }
  *:first-child+html ul#Navigation li {  /* Korrektur fuer den IE 7 */
    margin-bottom: -0.1em;
  }

* html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */
    left: -1.5em;
    lef\t: -0.4em;
  }
  *:first-child+html ul#Navigation ul {  /* Workaround fuer den IE 7  #FFCC33*/
    background-color:silver
 padding-bottom:0.4em;
  }
  * html ul#Navigation a, * html ul#Navigation span {
    width: 8.6em;   /* Breite nach altem MS-Boxmodell für IE 5.x */
    w\idth: 6.4em;  /* korrekte Breite fuer den IE 6 im standardkonformen Modus */
  }
  ul#Navigation li:hover ul {
 display: block;  /* Unternavigation erste Ebene einblenden */
  }
  ul#Navigation a.daddy {
 background: url(rightarrow2.gif) no-repeat 93% ;
 background-color: #FFFFFF;
  }
  ul#Navigation a {
    display: block;
    width: 6.4em;
    padding: 0.1em 1em;
    text-decoration: none; font-weight: normal;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: maroon;
 background-color: #FFFFFF;
  }
  ul#Navigation a:hover {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white;
 background-color: #3399FF;
  }
ul#Navigation li ul li ul li{/* Unternavigation seitliche Ebene ausblenden */
    display: none;
}

ul#Navigation li ul li:hover ul li{/* Unternavigation seitliche Ebene einblenden und nach recht schieben */
 display: block;
 left: 0.9em;
 z-index: 3;
}

ul#Navigation li ul li ul {
 margin: -1.5em 0 0 7.6em;
}
</style>

</head>
<body>
<h1 id="Beispiel">Dynamisch Navigationsleisten einblenden</h1>

<ul id="Navigation">
    <li><a href="#Beispiel">Seite 1</a></li>

<li><a href="#Beispiel">Seite 2</a>
      <ul>
        <li><a href="#Beispiel">Seite 2a</a></li>
        <li><a href="#Beispiel">Seite 2b</a></li>
      </ul>
    </li>

<li><a href="#Beispiel">Seite 3</a></li>

<li><a href="#Beispiel">Seite 4</a>
      <ul>
        <li><a href="#Beispiel">Seite 4a</a></li>
        <li><a class="daddy" href="#">Seite 4b</a>
   <ul >
    <li><a href="#">Seite 4b_1</a></li>
    <li><a href="#">Seite 4b_2</a></li>
   </ul>

</li>
        <li><a href="#Beispiel">Seite 4c</a></li>
      </ul>
    </li>

<li><a href="#Beispiel">Seite 5</a></li>
</ul>

</body>
</html>

##################################

vielen Dank und viele Grüße
hawk

  1. @@hawkmaster:

    Laut Self braucht man ja für den IE6 (und älter) ein bischen Javascript um den Hover Effekt für Listen nachzubilden.

    Braucht man nicht: CSS only drop-down menu

    Live long and prosper,
    Gunnar

    --
    Flughafen in Tempelhof
    findet jeder Hempel doof.
    1. Hi Gunnar,
      vielen Dank für deine Hilfe.
      tja da hätte ich mir wohl viel Zeit sparen können.
      Das ist CSS Kunst in Vollendung was man dort sieht.

      Dann werde ich wohl mein "Self-Eigen" Gewächs aufgeben...

      viele Grüße
      Hawk

      1. @@hawkmaster:

        Das ist CSS Kunst in Vollendung was man dort sieht.

        Eher die Kunst, dem IE mit eigentlich unsinnigem Markup doch noch das gewünschte Verhalten abzutrotzen.

        Live long and prosper,
        Gunnar

        --
        Flughafen in Tempelhof
        findet jeder Hempel doof.