JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Internet und Stichwortverzeichniss</h1>

  <div id="Rahmen"><ul id="Navigation">



    <li><a href="intern_vz_a.html">A</a></li>

    <li><a href="intern_vz_b.html">B</a>
      <ul>
        <li><a href="#Beispiel">Ba</a></li>
        <li><a href="#Beispiel">Be</a></li>
      </ul>
    </li>

    <li><a href="intern_vz_c.html">C</a></li>

    <li><a href="intern_vz_d.html">D</a>
      <ul>
        <li><a href="#Beispiel">Da</a></li>

        <li><a href="#Beispiel">Db</a></li>
      </ul>
    </li>

    <li><a href="intern_vz_e.html">E</a></li>

    <li><a href="intern_vz_f.html">F</a></li>

    <li><a href="intern_vz_g.html">G</a></li>

    <li><a href="intern_vz_h.html">H</a></li>

    <li><a href="intern_vz_i.html">I</a></li>

    <li><a href="intern_vz_j.html">J</a></li>

    <li><a href="intern_vz_k.html">K</a></li>

    <li><a href="intern_vz_l.html">L</a></li>

    <li><a href="intern_vz_m.html">M</a></li>

    <li><a href="intern_vz_n.html">N</a></li>

    <li><a href="intern_vz_o.html">O</a></li>

    <li><a href="intern_vz_p.html">P</a></li>

    <li><a href="intern_vz_q.html">Q</a></li>

    <li><a href="intern_vz_r.html">R</a></li>

    <li><a href="intern_vz_s.html">S</a></li>

    <li><a href="intern_vz_t.html">T</a></li>

    <li><a href="intern_vz_u.html">U</a></li>

    <li><a href="intern_vz_v.html">V</a></li>

    <li><a href="intern_vz_w.html">W</a></li>

    <li><a href="intern_vz_x.html">X</a></li>

    <li><a href="intern_vz_y.html">Y</a></li>

    <li><a href="intern_vz_z.html">Z</a></li>

  </ul><div></div></div>


<!-- erste Zeile einer Site der Page-->

<ul style="list-style-image:url('gif/balls/b_blue.gif')" id="aachen">
<li><p><b><font size="+1"><a title="Stadt" href="http://www.aach.de/" target="_blank">Aach</a></font></b></p></li>
</ul>

CSS

a:link { text-decoration:none; font-weight:bold; color:#E00000; }
h1 {
 font-size: larger;
}

  body {
    font: normal 100.01% Helvetica, Arial, sans-serif;
    color: black;
  }

    div#Rahmen {
    width: auto;
    padding: 0;
  }
  * html div#Rahmen {  /* Korrektur fuer IE 5.x */
    width: 48.7em;
    width: 47.1em;
  }
  div#Rahmen div {
    clear: left;
  }
  ul#Navigation {
    margin: 0; padding: 0;
    text-align: center;
  }

  ul#Navigation li {
    list-style: none;
    float: left;
    width: 2.58em;
    position: relative;
    margin: 0.2em; padding: 0;
  }
  * 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;
  }

  ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 1.7em; left: 0.6em;
    display: none;  /* Unternavigation ausblenden */
  }
  * html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */
    left: -1.5em;
    lef\t: -0.4em;
  }
  ul#Navigation li:hover ul {
    display: block;  /* Unternavigation in modernen Browsern einblenden */
  }

  ul#Navigation li ul li {
    float: none;
    display: block;
    margin-bottom: 0.2em;
  }

  ul#Navigation a, ul#Navigation span {
    display: block;
    padding: 0.2em 0.5em;
    text-decoration: none; font-weight: bold;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: maroon; background-color: #ccc;
  }
  * html ul#Navigation a, * html ul#Navigation span {  /* nur fuer IE erforderlich */
    width: 100%;
    w\idth: 6.4em;
  }
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: gray;
  }
  li a#aktuell {  /* aktuelle Rubrik kennzeichnen */
    color: maroon; background-color: silver;
  }
  ul#Navigation li ul span {  /* aktuelle Unterseite kennzeichnen */
   ...

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 = "silver";
  }
  function ausblenden() {
    sucheUL(this.firstChild).style.display = "none";
  }

  window.onload=hoverIE;
}