0 votes
1 view
in Web Technology by (14.5k points)

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 CSS3 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).

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 visibility: 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 are most welcome.

1 Answer

0 votes
by (32.3k points)

You can set transitions on the display: a property by concatenating two transitions or more, and visibility 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> 

...