変換を使用して純粋な CSS ポップアップ メニューを実装するためのサンプル コード

<ナビ>
  <ul>
    <li>
      <strong>ホーム</strong>
      <div>
        センチ
        <a href="">CRM</a>
      </div>
    </li>
    <li>
      <strong>ライブ</strong>
      <div>
        <a href="">ジャワ</a>
        <a href="">php</a>
      </div>
    </li>
    <li>
      <strong>ピクチャートゥルー</strong>
      <div>
        <a href="">ミリ</a>
        <a href="">dd</a>
      </div>
    </li>
  </ul>
</nav>

 *{
    パディング: 0;
    マージン: 0;
    ボックスのサイズ: 境界線ボックス;
  }
  体{
    幅：100vw;
    高さ：100vh;
    ディスプレイ: フレックス;
    flex-direction: 列;
    コンテンツの配置: flex-start;
    アイテムの位置を中央揃えにします。
  }
  ナビ{
    マージン: 10px;
  }
  ナビゲーション{
    リストスタイルタイプ: なし;
    高さ: 32px;
    ディスプレイ: フレックス;
  }
  nav ul li{
    右マージン: 10px;
  }
  nav ul li strong{
    テキスト変換:大文字;
    背景色: #9b59b6;
    色: 白;
    パディング: 5px 30px;
    行の高さ: 30px;
    カーソル: ポインタ;
  }
  nav ul li strong+div{
    ディスプレイ: フレックス;
    flex-direction: 列;
    背景色: #3498db;
    パディング: 10px;
    変換: translateY(-110%);
    不透明度: 0;
    遷移: .3秒;
    変換の起点: 上;
  }
  nav ul li:hover div{
    変換: translateY(0);
    不透明度: 1;
  }
  nav ul li strong+div a{
    色: 白;
    テキスト装飾: なし;
    テキスト変換:大文字;
    パディング: 5px 0;
  }