Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS3 Transition Failing

CSS3 Transition Failing

Problem

I can't get Transition to work on a website i'm working on. The nav menu hides and shows correctly, but it just appears instantly without tranistion. The CSS is this:

.nav ul li ul li {
    display:none;
    visibility:hidden;
    transition: all 0.5s ease;
}
.nav ul li:hover > ul 
{
    transition: all 0.5s ease 0s;
    display:block;
    visibility:visible;
}

and the HTML is


I have tested it in chrome, ffx, ie.

I actually got most of this code off another answer on this site, so i'm not sure what my problem is here.

I should have mentioned, I have tried opacity from other answers, but in a drop down menu, it won't work as the menu stays there.

Problem courtesy of: Wayneio

Solution

Try This CSS this will work fine

.nav ul li > ul {
   opacity:0;
    overflow:hidden;
     transition: all 0.5s ease;
}
.nav ul li:hover > ul 
{
    transition: all 0.5s ease 0s;
    height:auto;
    opacity:1;  
}

Demo Here

Solution courtesy of: Love Trivedi

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS3 Transition Failing

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×