js implementiert das Ein- und Ausblenden von Inhalten mit der Maus über die Karte

<div Klasse="Sport-Purple">
   <div Klasse="alle">
    
    <!-- Inhalt -->
    <div Klasse="Inhalt">
     
     <div Klasse="erster-Block">
      <!-- Seitenleiste für Inhalte -->
      <div Klasse="beiseite">
       <h2>Kategorien</h2>
       <ul Klasse="lis">
        <li Klasse="sna">
         <a href="#">Turnschuhe</a>
         <div id="sub">
           <div><a href="#">Laufschuhe</a></div>
           <div><a href="#">Basketballschuhe</a></div>
           <div><a href="#">Fußballschuhe</a></div>
           <div><a href="#">Wanderschuhe</a></div>
           <div><a href="#">Skateboardschuhe</a></div>
           <div><a href="#">Tanzschuhe</a></div>
           <div><a href="#">Tennisschuhe</a></div>
           <div><a href="#">Fahrradschuhe</a></div>
           <div><a href="#">Wanderschuhe</a></div>
           <div><a href="#">Golfschuhe</a></div>
         </div>
        </li>
        <li Klasse="sna">
         <a href="#">Sportbekleidung</a>
         <div id="sup">
           <div><a href="#">Jacken</a></div>
           <div><a href="#">Basisschichten</a></div>
           <div><a href="#">Hemden</a></div>
           <div><a href="#">Sets/Anzüge</a></div>
         </div>
        </li>
        <li Klasse="sna">
         <a href="#">Radfahren</a>
         <div id="cyc">
           <div><a href="#">Fahrrad</a></div>
           <div><a href="#">Fahrradteile</a></div>
           <div><a href="#">Fahrradzubehör</a></div>
           <div><a href="#">Fahrradreparaturwerkzeuge</a></div>
           <div><a href="#">Fahrradbekleidung</a></div>
           <div><a href="#">Fahrradschuhe</a></div>
           <div><a href="#">Elektrofahrrad</a></div>
           <div><a href="#">Teil für Elektrofahrräder</a></div>
           <div><a href="#">Selbstbalancierende Scooter</a></div>
         </div>
        </li>
        <li Klasse="sna">
         <a href="#">Fertigstellung</a>
         <div id="Ende">
           <div><a href="#">Angelruten</a></div>
           <div><a href="#">Angelrollen</a></div>
           <div><a href="#">Rutenkombination</a></div>
           <div><a href="#">Angelköder</a></div>
           <div><a href="#">Angelschnüre</a></div>
           <div><a href="#">Angelhaken</a></div>
           <div><a href="#">Angelkisten</a></div>
           <div><a href="#">Angelpose</a></div>
           <div><a href="#">Fischernetz</a></div>
           <div><a href="#">Angelseil</a></div>
         </div>
        </li>
        <li Klasse="sna">
         <a href="#">Jagd</a>
         <div id="hun">
           <div><a href="#">Pfeil und Bogen</a></div>
           <div><a href="#">Jagdoptik</a></div>
           <div><a href="#">Jagdkameras</a></div>
           <div><a href="#">Waffenlichter</a></div>
           <div><a href="#">Jagdtaschen und Holster</a></div>
           <div><a href="#">Jagdmesser</a></div>
           <div><a href="#">Jagdlichter</a></div>
           <div><a href="#">Jagdattrappe</a></div>
           <div><a href="#">Zubehör für Jagdwaffen</a></div>
           <div><a href="#">Zielfernrohrmontagen und Zubehör</a></div>
         </div>
        </li>
        <li Klasse="sna">
         <a href="#">Camping & Wandern</a>
         <div id="Kamera">
           <div><a href="#">Zelte</a></div>
           <div><a href="#">Sonnenschutz</a></div>
           <div><a href="#">Schlafsäcke</a></div>
           <div><a href="#">Klettertaschen</a></div>
           <div><a href="#">Outdoor-Kocher</a></div>
           <div><a href="#">Outdoor-Geschirr</a></div>
           <div><a href="#">Picknicktaschen</a></div>
           <div><a href="#">Wasserbeutel</a></div>
           <div><a href="#">Isomatte</a></div>
           <div><a href="#">Außenbeleuchtung</a></div>
         </div>
        </li>
        <li Klasse="sna">
         <a href="#">Fitness und Bodybuilding</a>
         <div id="passen">
           <div><a href="#">Fitnessgeräte</a></div>
           <div><a href="#">Outdoor-Fitnessgeräte</a></div>
           <div><a href="#">Boxen</a></div>
           <div><a href="#">Yoga</a></div>
           <div><a href="#">Gymnastik</a></div>
           <div><a href="#">Kampfsport</a></div>
           <div><a href="#">Gewichtheben</a></div>
           <div><a href="#">Gewichtheberhandschuhe</a></div>
           <div><a href="#">Fitnesshandschuhe</a></div>
           <div><a href="#">Tanzschuhe</a></div>
         </div>
        </li>
        <li Klasse="sna">
         <a href="#">Musikinstrumente</a>
         <div id="mus">
           <div><a href="#">Gitarre</a></div>
           <div><a href="#">Gitarrenteile und Zubehör</a></div>
           <div><a href="#">Violine</a></div>
           <div><a href="#">Geigenteile und Zubehör</a></div>
           <div><a href="#">Holzblasinstrumente</a></div>
           <div><a href="#">Schlaginstrumente</a></div>
           <div><a href="#">Instrumententaschen und -koffer</a></div>
           <div><a href="#">Blechblasinstrumente</a></div>
           <div><a href="#">Tasteninstrumente</a></div>
         </div>
        </li>
       </ul>
       
       <div Klasse="flip">
        <a href="#"class="Seite nach unten">
         <img src="../images/arrow.png">
        </a>
        <a href="#"class="Seite Seite nach oben">
         <img src="../images/arrow.png">
        </a>
        <div Klasse="Schwanz">
         1/3
        </div>
       </div>
      </div>
      
     </div>
 
 
    </div>
 
   </div>
 
  </div>
 
</div>

*{
 Rand: 0;
 Polsterung: 0;
}
A{
 Textdekoration: keine;
}
li{
 Listenstil: keiner;
}
 
.sports-lila{
 Breite: 100 %;
 Hintergrundfarbe: #EEEEEE;
 Position: relativ;
 Polsterung oben: 10px;
}
 
/* Stil für den Beginn der Inhaltsseitenleiste */
.erster-block{
 Breite: 100 %;
 Höhe: 500px;
}
.beiseite{
 Breite: 280px;
 Höhe: 465px;
 Hintergrundfarbe: #FFFFFF;
 Rand links: 150px;
}
.beiseite h2{
 Farbe: #a059cb;
 Textausrichtung: links;
 Zeilenhöhe: 60px;
 Rahmen unten: 1px durchgezogen #A059CB;
 Schriftstärke: 400;
 Schriftgröße: 18px;
 Polsterung: 0 20px;
}
.lis li{
 Rahmen unten: 1px durchgezogen #EEEEEE;
 Zeilenhöhe: 40px;
 Höhe: 40px;
 Rand: 0 20px 0 20px;
}
.lis li a{
 Farbe: #000000;
 Schriftgröße: 13px;
}
.list a:hover,.lis li a:hover{
 Farbe: #FF4500;
 Textdekoration: Unterstreichen;
}
 
.umdrehen{
 Rand: 20px 0 20px 0px;
 Zeilenhöhe: 30px;
}
.umblättern .bildnachunten{
 Breite: 30px;
 Höhe: 30px;
 Rahmenradius: 4px;
 Anzeige: Inline-Block;
 Rand: 1px durchgezogen #a5a5a5;
 Position: relativ;
 links: 20px;
 Überlauf: versteckt;
 Rand unten: 20px;
}
.flip .pagedown img{
 Position: absolut;
 links: 10px;
 oben: 13px;
}
.umblättern .Seite nach oben{
 Breite: 30px;
 Höhe: 30px;
 Rahmenradius: 4px;
 Anzeige: Inline-Block;
 Rand: 1px durchgezogen #a5a5a5;
 Position: relativ;
 links: 40px;
 Überlauf: versteckt;
 Rand unten: 20px;
}
.flip .pageup img{
 Position: absolut;
 links: -30px;
 oben: -32px;
}
.umdrehen .tail{
 schweben: rechts;
 Rand rechts: 130px;
 Schriftgröße: 12px;
}
 
#sub, #sup, #cyc,
#fin, #hun, #cam, #fit, #mus
 Breite: 300px;
 Höhe: 403px;
 Position: absolut;
 links: 400px;
 oben: 70px;
 Schriftgröße: 13px;
 Rand: 1px durchgezogen #A059CB;
 Hintergrundfarbe: #FFFFFF;
 Z-Index: 10;
 Anzeige: keine;
}
.beiseite li:hover{
 Rahmen links: 4px durchgezogen #A059CB;
 Rahmen oben: 1px durchgezogen #A059CB;
 Rahmen unten: 1px durchgezogen #A059CB;
 Polsterung links: 10px;
 Rand links: 20px;
 Hintergrundfarbe: #FFFFFF;
}
 
#sub div,#sup div,
#cyc div,#fin div,
#hun div,#cam div,#fit div,
#mus div{
 Rand links: 20px;
}

// Li nach Klassennamen abrufen
var lis = document.getElementsByClassName("sna");
 
//Durchlaufe die li-Tags mit dem Klassennamen sna for(var i = 0;i<lis.length;i++){
 //Mausbewegungsereignis für li registrieren lis[i].onmouseover = function(){
  /* dies: li mit Klassennamen sna */
  //konsole.log(dies);
  /* this.children: Holt die untergeordneten Elemente unter dem Tag „li“*/
  // Konsole.log(diese.Kinder);
  var nächstes = diese.Kinder;
  //next[1]: Unter den beiden Unterelementen unter li ist der Index der Beschriftung des anzuzeigenden Elements 1
  nächste[1].style.display = "Block";
 };
 //Mouse-Out-Ereignis für li registrieren lis[i].onmouseout = function(){
  var nächstes = diese.Kinder;
  nächste[1].style.display = "keine";
 };
}