Transitions on the CSS display property
css, css-transitions
Solution
You can concatenate two transitions or more, and `visibility` is what comes handy this time.
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>
(Don't forget the vendor prefixes to the `transition` property.)
More details are in this article.
Problem
I'm currently designing a CSS 'mega dropdown' menu - basically a regular CSS-only dropdown menu, but one that contains different types of content. At the moment, it appears that CSS 3 transitions don't apply to the 'display' property, i.e., you can't do any sort of transition from `display: none` to `display: block` (or any combination). Is there a way for the second-tier menu from the above example to 'fade in' when someone hovers over one of the top level menu items? I'm aware that you can use transitions on the `visibility:` property, but I can't think of a way to use that effectively. I've also tried using height, but that just failed miserably. I'm also aware that it's trivial to achieve this using JavaScript, but I wanted to challenge myself to use just CSS, and I think I'm coming up a little short.