Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Zachary Pearson
Zachary Pearson
9,578 Points

CSS fade in dropdown menu issue

Having a bit of a strange problem setting up a fade in drop down menu - here's my CSS for it:

.main-navigation li ul li { 
 opacity:0; 
 transition:opacity 0.3s linear; 
 -webkit-transition:opacity 0.3s linear; 
 -moz-transition:opacity 0.3s linear; 
 -o-transition:opacity 0.3s linear; 
}

.main-navigation li:hover > ul li { 
     opacity:1; 
}

The sublists fade in properly when you scroll over the list item, but the problem is that they also fade in when you scroll over the area where they will be once they fade in. I've tried a few things but can't seem to solve it. Any ideas?

Thanks!

1 Answer

Zachary Pearson
Zachary Pearson
9,578 Points

Someone on Stack Overflow answered my question - for anyone interested, I ended up replacing the above with this:

.main-navigation li ul { position: absolute; /* Take it out of the document flow */ visibility:hidden; opacity:0; transition:visibility 0s linear 0.3s, opacity 0.3s linear; }

.main-navigation li:hover > ul { visibility:visible; opacity:1; transition-delay:0s; }