<p>Ich entwerfe derzeit ein CSS-„Super-Dropdown“ – im Grunde ein normales reines CSS-Dropdown, aber mit verschiedenen Arten von Inhalten darin. </p> <p>Derzeit <strong> scheinen CSS 3-Übergangseffekte nicht auf das „display“-Attribut anzuwenden</strong>, das heißt, es gibt keine Möglichkeit zum Übergang von <code>display: none</ code> bis <code>display: block</code> </p> <p>Gibt es im obigen Beispiel eine Möglichkeit, das Menü der zweiten Ebene „einblenden“ zu lassen, wenn jemand mit der Maus über das oberste Menüelement fährt? </p> <p>Ich weiß, dass Sie Übergangseffekte für das Attribut <code>visibility:</code> verwenden können, aber ich weiß nicht, wie ich es effektiv nutzen kann. </p> <p>Ich habe es auch mit der Höhe versucht, aber die Ergebnisse waren schrecklich. </p> <p>Ich weiß auch, dass dies leicht mit JavaScript erreicht werden kann, aber ich wollte mich der Herausforderung stellen, nur CSS zu verwenden, aber ich habe das Gefühl, dass ich ein wenig überfordert bin. </p>

div {
    display: none;
    transition: opacity 1s ease-out;
    opacity: 0;
}
div.active {
    opacity: 1;
    display: block;
}

div {
    transition: opacity 1s ease-out;
    opacity: 0;
    height: 0;
    overflow: hidden;
}
div.active {
    opacity: 1;
    height: auto;
}

div {
  border: 1px solid #eee;
}
div > ul {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
  visibility: visible;
  opacity: 1;
}

<div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>