js はマウスインとマウスアウトによるカード切り替えコンテンツを実装します

<div class="スポーツパープル">
   <div class="all">
    
    <!-- 目次 -->
    <div class="content">
     
     <div class="first-block">
      <!-- コンテンツ用サイドバー -->
      <div class="aside">
       <h2>カテゴリー</h2>
       <ul class="lis">
        <li class="sna">
         <a href="#">スニーカー</a>
         <div id="sub">
           <div><a href="#">ランニングシューズ</a></div>
           <div><a href="#">バスケットボールシューズ</a></div>
           <div><a href="#">サッカーシューズ</a></div>
           <div><a href="#">ハイキングシューズ</a></div>
           <div><a href="#">スケートボードシューズ</a></div>
           <div><a href="#">ダンスシューズ</a></div>
           <div><a href="#">テニスシューズ</a></div>
           <div><a href="#">サイクリングシューズ</a></div>
           <div><a href="#">ウォーキングシューズ</a></div>
           <div><a href="#">ゴルフシューズ</a></div>
         </div>
        </li>
        <li class="sna">
         <a href="#">スポーツウェア</a>
         <div id="sup">
           <div><a href="#">ジャケット</a></div>
           <div><a href="#">ベースレイヤー</a></div>
           <div><a href="#">シャツ</a></div>
           <div><a href="#">セット/スーツ</a></div>
         </div>
        </li>
        <li class="sna">
         <a href="#">サイクリング</a>
         <div id="cyc">
           <div><a href="#">自転車</a></div>
           <div><a href="#">自転車部品</a></div>
           <div><a href="#">自転車アクセサリー</a></div>
           <div><a href="#">自転車修理ツール</a></div>
           <div><a href="#">サイクリングウェア</a></div>
           <div><a href="#">サイクリングシューズ</a></div>
           <div><a href="#">電動自転車</a></div>
           <div><a href="#">電動自転車パーツ</a></div>
           <div><a href="#">セルフバランススクーター</a></div>
         </div>
        </li>
        <li class="sna">
         <a href="#">仕上げ</a>
         <div id="fin">
           <div><a href="#">釣り竿</a></div>
           <div><a href="#">釣り用リール</a></div>
           <div><a href="#">ロッドコンボ</a></div>
           <div><a href="#">釣りルアー</a></div>
           <div><a href="#">釣り糸</a></div>
           <div><a href="#">釣り針</a></div>
           <div><a href="#">釣り用タックルボックス</a></div>
           <div><a href="#">釣り用フロート</a></div>
           <div><a href="#">釣り網</a></div>
           <div><a href="#">釣りロープ</a></div>
         </div>
        </li>
        <li class="sna">
         <a href="#">狩猟</a>
         <div id="hun">
           <div><a href="#">弓と矢</a></div>
           <div><a href="#">狩猟用光学機器</a></div>
           <div><a href="#">ハンティングカメラ</a></div>
           <div><a href="#">武器ライト</a></div>
           <div><a href="#">ハンティングバッグとホルスター</a></div>
           <div><a href="#">ハンティングナイフ</a></div>
           <div><a href="#">狩猟用ライト</a></div>
           <div><a href="#">狩猟用デコイ</a></div>
           <div><a href="#">狩猟用銃アクセサリー</a></div>
           <div><a href="#">スコープマウントとアクセサリ</a></div>
         </div>
        </li>
        <li class="sna">
         <a href="#">キャンプとハイキング</a>
         <div id="cam">
           <div><a href="#">テント</a></div>
           <div><a href="#">サンシェルター</a></div>
           <div><a href="#">寝袋</a></div>
           <div><a href="#">クライミングバッグ</a></div>
           <div><a href="#">アウトドアストーブ</a></div>
           <div><a href="#">アウトドア用食器</a></div>
           <div><a href="#">ピクニックバッグ</a></div>
           <div><a href="#">ウォーターバッグ</a></div>
           <div><a href="#">キャンプ用マット</a></div>
           <div><a href="#">屋外照明</a></div>
         </div>
        </li>
        <li class="sna">
         <a href="#">フィットネスとボディビルディング</a>
         <div id="fit">
           <div><a href="#">フィットネス機器</a></div>
           <div><a href="#">屋外フィットネス機器</a></div>
           <div><a href="#">ボクシング</a></div>
           <div><a href="#">ヨガ</a></div>
           <div><a href="#">体操</a></div>
           <div><a href="#">格闘技</a></div>
           <div><a href="#">ウェイトリフティング</a></div>
           <div><a href="#">ウェイトリフティンググローブ</a></div>
           <div><a href="#">フィットネスグローブ</a></div>
           <div><a href="#">ダンスシューズ</a></div>
         </div>
        </li>
        <li class="sna">
         <a href="#">楽器</a>
         <div id="mus">
           <div><a href="#">ギター</a></div>
           <div><a href="#">ギターパーツとアクセサリー</a></div>
           <div><a href="#">バイオリン</a></div>
           <div><a href="#">バイオリンのパーツとアクセサリー</a></div>
           <div><a href="#">木管楽器</a></div>
           <div><a href="#">打楽器</a></div>
           <div><a href="#">楽器用バッグとケース</a></div>
           <div><a href="#">金管楽器</a></div>
           <div><a href="#">キーボード楽器</a></div>
         </div>
        </li>
       </ul>
       
       <div class="flip">
        <a href="#"class="ページ ページダウン">
         <img src="../images/arrow.png">
        </a>
        <a href="#"class="ページ ページアップ">
         <img src="../images/arrow.png">
        </a>
        <div class="tail">
         1/3
        </div>
       </div>
      </div>
      
     </div>
 
 
    </div>
 
   </div>
 
  </div>
 
</div>

*{
 マージン:0;
 パディング:0;
}
{
 テキスト装飾: なし;
}
li{
 リストスタイル: なし;
}
 
.スポーツ-パープル{
 幅: 100%;
 背景色: #EEEEEE;
 位置: 相対的;
 パディング上部: 10px;
}
 
/* コンテンツサイドバースタイルの開始 */
.first-block{
 幅: 100%;
 高さ: 500px;
}
.脇に{
 幅: 280ピクセル;
 高さ: 465ピクセル;
 背景色: #FFFFFF;
 左マージン: 150px;
}
.aside h2{
 色: #a059cb;
 テキスト配置: 左;
 行の高さ: 60px;
 下境界線: 1px 実線 #A059CB;
 フォントの太さ: 400;
 フォントサイズ: 18px;
 パディング: 0 20px;
}
.lis li{
 下境界線: 1px 実線 #EEEEEE;
 行の高さ: 40px;
 高さ: 40px;
 マージン: 0 20px 0 20px;
}
.lis li a{
 色: #000000;
 フォントサイズ: 13px;
}
.list a:hover,.lis li a:hover{
 色: #FF4500;
 テキスト装飾: 下線;
}
 
.反転{
 マージン: 20px 0 20px 0px;
 行の高さ: 30px;
}
.flip .pagedown{
 幅: 30ピクセル;
 高さ: 30px;
 境界線の半径: 4px;
 表示: インラインブロック;
 境界線: 1px 実線 #a5a5a5;
 位置: 相対的;
 左: 20px;
 オーバーフロー: 非表示;
 下マージン: 20px;
}
.flip .pagedown 画像{
 位置: 絶対;
 左: 10px;
 上: 13px;
}
.flip .pageup{
 幅: 30ピクセル;
 高さ: 30px;
 境界線の半径: 4px;
 表示: インラインブロック;
 境界線: 1px 実線 #a5a5a5;
 位置: 相対的;
 左: 40px;
 オーバーフロー: 非表示;
 下マージン: 20px;
}
.flip .pageup 画像{
 位置: 絶対;
 左: -30px;
 上: -32px;
}
.フリップ.テール{
 フロート: 右;
 右マージン: 130px;
 フォントサイズ: 12px;
}
 
#sub、#sup、#cyc、
#fin、#hun、#cam、#fit、#mus
 幅: 300ピクセル;
 高さ: 403px;
 位置: 絶対;
 左: 400px;
 上: 70px;
 フォントサイズ: 13px;
 境界線: 1px 実線 #A059CB;
 背景色: #FFFFFF;
 zインデックス: 10;
 表示: なし;
}
.aside li:hover{
 左境界線: 4px 実線 #A059CB;
 上境界線: 1px 実線 #A059CB;
 下境界線: 1px 実線 #A059CB;
 左パディング: 10px;
 左マージン: 20px;
 背景色: #FFFFFF;
}
 
#サブ div、#スーパー div、
#サイクル div、#終了 div、
#ハン div、#カム div、#フィット div、
#mus div{
 左マージン: 20px;
}

// クラス名に従ってliを取得する
var lis = document.getElementsByClassName("sna");
 
//クラス名 sna の li タグをループします for(var i = 0;i<lis.length;i++){
 //liのマウス移動イベントを登録する lis[i].onmouseover = function(){
  /* this: クラス名 sna の li */
  //コンソールログ(これ);
  /* this.children: li タグの下の子要素を取得します*/
  // コンソールにログ出力します。
  var next = this.children;
  //next[1]: liの下の2つのサブ要素のうち、表示する要素のラベルの添え字は1である
  next[1].style.display = "ブロック";
 };
 //liのマウスアウトイベントを登録する lis[i].onmouseout = function(){
  var next = this.children;
  next[1].style.display = "なし";
 };
}