Beispielcode zur Implementierung eines reinen CSS-Popup-Menüs mit Transform

<Navigation>
  <ul>
    <li>
      <strong>Startseite</strong>
      <div>
        cms
        <a href="">crm</a>
      </div>
    </li>
    <li>
      <strong>leben</strong>
      <div>
        <a href="">java</a>
        <a href="">php</a>
      </div>
    </li>
    <li>
      <strong>Bild</strong>
      <div>
        <a href="">mm</a>
        <a href="">dd</a>
      </div>
    </li>
  </ul>
</nav>

 *{
    Polsterung: 0;
    Rand: 0;
    Box-Größe: Rahmenbox;
  }
  Körper{
    Breite: 100vw;
    Höhe: 100vh;
    Anzeige: Flex;
    Flex-Richtung: Spalte;
    Inhalt ausrichten: Flex-Start;
    Elemente ausrichten: zentrieren;
  }
  nav{
    Rand: 10px;
  }
  Navigation ul {
    Listenstiltyp: keiner;
    Höhe: 32px;
    Anzeige: Flex;
  }
  nav ul li{
    Rand rechts: 10px;
  }
  nav ul li stark{
    Texttransformation: Großbuchstaben;
    Hintergrundfarbe: #9b59b6;
    Farbe: weiß;
    Polsterung: 5px 30px;
    Zeilenhöhe: 30px;
    Cursor: Zeiger;
  }
  nav ul li strong+div{
    Anzeige: Flex;
    Flex-Richtung: Spalte;
    Hintergrundfarbe: #3498db;
    Polsterung: 10px;
    transformieren: übersetzenY(-110%);
    Deckkraft: 0;
    Übergang: .3s;
    Transform-Origin: oben;
  }
  nav ul li:hover div{
    transformieren: übersetzenY(0);
    Deckkraft: 1;
  }
  nav ul li strong+div a{
    Farbe: weiß;
    Textdekoration: keine;
    Texttransformation: Großbuchstaben;
    Polsterung: 5px 0;
  }