Verwenden Sie reines JS, um den sekundären Menüeffekt zu erzielen

<Stil>
*{
                Rand: 0px automatisch;
                Polsterung: 0px;
                }
            .yiji{
                Breite: 200px;
                Höhe: 40px;
                Hintergrundfarbe: rot;
                Farbe: #fff;
                Textausrichtung: zentriert;
                Zeilenhöhe: 40px;h
                vertikale Ausrichtung: Mitte;
                Rand: 1px durchgezogen #FFF;
                }
            .erji1{
                Breite: 200px;
                Höhe: 40px;
                Hintergrundfarbe: #F63;
                Farbe: #fff;
                Textausrichtung: zentriert;
                Zeilenhöhe: 40px;
                vertikale Ausrichtung: Mitte;
                Rand: 1px durchgezogen #FFF;
                }
            #erji2{
                Anzeige: keine;
                                }
                 
            #erji3{
                Anzeige: keine;
                                }
                 
            #erji4{
                Anzeige: keine;
                                }
             
        </Stil>
    </Kopf>
     
    <Text>
        <div Klasse="yiji" onclick="Anzeigen('erji2')">Startseite</div>
        <div id="erji2">
            <div Klasse="erji1">1</div>
            <div Klasse="erji1">1</div>
            <div Klasse="erji1">1</div>
             
        </div>
         
        <div class="yiji" onclick="Anzeigen('erji3')">Talent</div>
        <div id="erji3">
            <div Klasse="erji1">1</div>
            <div Klasse="erji1">1</div>
            <div Klasse="erji1">1</div>
             
        </div>
         
        <div class="yiji" onclick="Show('erji4')">Markt</div>
        <div id="erji4">
            <div Klasse="erji1">1</div>
            <div Klasse="erji1">1</div>
            <div Klasse="erji1">1</div>
        </div>
    </body>
    <Skripttyp="text/javascript">
                Funktion Show(a)
        {
            var a = document.getElementById(a);
            wenn(a.style.display == "block")
            {
                a.style.display = "keine";  
            }
            anders
            {
                a.style.display = "Block";
            }
        }   

</Skript> 

#caidan{
        Breite: 200px;
        Höhe: 40px;
        Rand: 1px durchgezogen #999;
        Textausrichtung: zentriert;
        Zeilenhöhe: 40px;
        vertikale Ausrichtung: Mitte;
        }
     .Liste{
       Breite: 200px;
       Höhe: 40px;
       Rand: 1px durchgezogen #999;
       Rahmenbreite oben: 0px;
       Textausrichtung: zentriert;
       Zeilenhöhe: 40px;
       vertikale Ausrichtung: Mitte;
       Anzeige: keine;
     }
      #caidan,.list:hover{
     Cursor:Zeiger;
                 
   }
  .list:hover{
                 
   Hintergrundfarbe: #63F;
}

<div Stil="Breite:200px; Höhe:400px;">
   <div id="caidan" onclick="Anzeigen()">China</div>
   <div Klasse = "Liste" onclick = "Xuan (dies)">Shandong</div>
   <div Klasse = "Liste" onclick = "Xuan (dies)">Jinan</div>
   <div Klasse = "Liste" onclick = "Xuan (dies)"> Jining </div>
   <div Klasse = "Liste" onclick = "Xuan (dies)">Weihai</div>
   <div Klasse = "Liste" onclick = "Xuan (dies)"> Zibo</div>
</div>

Funktion Show()
        {
            var Liste = document.getElementsByClassName("Liste");
             
            //Liste anzeigen für (var i=0;i<list.length;i++)
            {
                Liste[i].style.display = "Block";   
            }  
        }
         
        Funktion Xuan(a)
        {
            var c = document.getElementById("caidan");
            c.innerHTML = a.innerHTML;
             
            var Liste = document.getElementsByClassName("Liste");
            //Liste anzeigen für (var i=0;i<list.length;i++)
            {
                Liste[i].style.display = "keine";
            }  
                 
        }