RichardTape RichardTape - 1 year ago 101
CSS Question

Transitions on the display: property

I'm currently designing a kind of CSS 'mega dropdown' menu - basically a normal CSS-only dropdown menu, but one that contains different types of content.

At the moment, it appears that CSS3 Transitions don't apply to the 'display' property, i.e. you can't do any sort of transition from

display: none
display: block
(or any combination).

Can anyone think of 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
property, but I can't think of a way to utilise 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.

All and any suggestions most welcome.

Answer Source

You can concatenate two transitions or more, and visibility is what comes handy this time.

div > ul {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
div:hover > ul {
  visibility: visible;
  opacity: 1;

(Don't forget the vendor prefixes to the transition property)

More details are in this article

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download