純粋なJSを使用してセカンダリメニュー効果を実現します

<スタイル>
*{
                マージン:0px 自動;
                パディング:0px;
                }
            .yiji{
                幅:200px;
                高さ:40px;
                背景色:赤;
                色:#fff;
                テキスト配置:中央;
                行の高さ:40px;h
                垂直位置揃え:中央;
                境界線:1px実線 #FFF;
                }
            .erji1{
                幅:200px;
                高さ:40px;
                背景色:#F63;
                色:#fff;
                テキスト配置:中央;
                行の高さ:40px;
                垂直位置揃え:中央;
                境界線:1px実線 #FFF;
                }
            #エルジ2{
                表示:なし;
                                }
                 
            #エルジ3{
                表示:なし;
                                }
                 
            #エルジ4{
                表示:なし;
                                }
             
        </スタイル>
    </head>
     
    <本文>
        <div class="yiji" onclick="Show('erji2')">ホーム</div>
        <div id="erji2">
            <div class="erji1">1</div>
            <div class="erji1">1</div>
            <div class="erji1">1</div>
             
        </div>
         
        <div class="yiji" onclick="Show('erji3')">才能</div>
        <div id="erji3">
            <div class="erji1">1</div>
            <div class="erji1">1</div>
            <div class="erji1">1</div>
             
        </div>
         
        <div class="yiji" onclick="Show('erji4')">マーケット</div>
        <div id="erji4">
            <div class="erji1">1</div>
            <div class="erji1">1</div>
            <div class="erji1">1</div>
        </div>
    </本文>
    <script type="text/javascript">
                関数 Show(a)
        {
            var a = document.getElementById(a);
            if(a.style.display == "ブロック")
            {
                a.style.display = "なし";  
            }
            それ以外
            {
                a.style.display = "ブロック";
            }
        }   

</スクリプト> 

#カイダン{
        幅:200px;
        高さ:40px;
        境界線:1px 実線 #999;
        テキスト配置:中央;
        行の高さ:40px;
        垂直位置揃え:中央;
        }
     。リスト{
       幅:200px;
       高さ:40px;
       境界線:1px 実線 #999;
       境界線の上部の幅:0px;
       テキスト配置:中央;
       行の高さ:40px;
       垂直位置揃え:中央;
       表示:なし;
     }
      #カイダン,.list:hover{
     カーソル:ポインタ;
                 
   }
  .list:hover{
                 
   背景色:#63F;
}

<div スタイル="幅:200px; 高さ:400px;">
   <div id="caidan" onclick="表示()">中国</div>
   <div class="list" onclick="Xuan(this)">山東省</div>
   <div class="list" onclick="Xuan(this)">済南</div>
   <div class="list" onclick="Xuan(this)">済寧</div>
   <div class="list" onclick="Xuan(this)">威海</div>
   <div class="list" onclick="Xuan(this)">シ博</div>
</div>

関数 Show()
        {
            var list = document.getElementsByClassName("list");
             
            //リストを表示 for(var i=0;i<list.length;i++)
            {
                list[i].style.display = "ブロック";   
            }  
        }
         
        関数Xuan(a)
        {
            var c = document.getElementById("caidan");
            c.innerHTML = a.innerHTML;
             
            var list = document.getElementsByClassName("list");
            //リストを表示 for(var i=0;i<list.length;i++)
            {
                list[i].style.display = "なし";
            }  
                 
        }