[解決済み] CSSのdisplayプロパティで遷移する

質問内容

現在、CSSの「メガドロップダウン」メニューをデザインしています。基本的には通常のCSSのみのドロップダウン・メニューですが、さまざまな種類のコンテンツを含むメニューです。

現時点では CSS 3 の遷移は 'display' プロパティに適用されないようです。 からの遷移はできません。 display: none から display: block (または任意の組み合わせ)。

誰かがトップレベルのメニュー項目の1つにマウスを置いたときに、上記の例から2番目の層のメニューが「フェードイン」する方法はありますか？

のトランジションが使えることは承知しています。 visibility: プロパティがありますが、それを効果的に使う方法が思いつきません。

また、heightも使ってみましたが、これは見事に失敗しました。

JavaScriptで実現するのは簡単だということも分かっているのですが、CSSだけで挑戦したかったので、少し物足りない気がします。

どうすれば解決するの？

2つ以上のトランジションを連結することができ visibility は、今回便利なものです。

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>

(のベンダープレフィックスを忘れないでください）。 transition プロパティを使用します)。

より詳細な情報は この記事 .