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
Graham Davidson
Courses Plus Student 14,966 PointsCSS Transitions
I am just putting this together and although I am pretty happy with it the drop down menu appears to load in a slightly odd way and I cannot work out why.
Basically this is a CSS3 transition that extends the height of the nested ul - you have to look quick but it is like it loads the background of the list (white) in after the contents and I cannot work out why.
Just wondering if someone could help with this.
The site is here oh and its on products and services.
And one last thing do we think I should ditch the underline on the <a> in the drop down.
G
James Barnett
39,199 PointsDaniel Lewis - I totally covet your ability to delete your own reply/answer 
Daniel Lewis
1,437 PointsJames Barnett Sorry, I was told you got this functionality already. Let me see what I can do!
James Barnett
39,199 PointsDaniel Lewis - Nope, as a moderator I can delete an entire thread, however I can't delete an individual reply/answer inside of a thread.
Daniel Lewis
1,437 PointsJames Barnett Going to push a fix for that today. You are able to move threads, yes?
James Barnett
39,199 PointsDaniel Lewis - I can edit the category a thread is in, like you did in this thread yes.
3 Answers
James Barnett
39,199 PointsGraham Davidson - Here are the CSS transitions I use on my drop down menu:
#navmenu li { transition: all 0.2s; }
#navmenu li a { transition: all 0.5s; }
#drop { transition: all 1s; }
#drop li { transition: height 0.5s; }
In case you are curious, here's the HTML that CSS is selecting against:
<ul id="navmenu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li>Products
<ul id = "drop" >
<li><a href="#">Widgets</a></li>
<li><a href="#">Thingamabobs</a></li>
<li><a href="#">Doohickies</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
Here's my drop down menu on codepen.
J.T. Gralka
20,126 PointsBrilliant solution, James! That hits the nail right on the head! Hopefully that helps, Graham Davidson!
J.T. Gralka
20,126 PointsFirst off, WOW! I really like your page!
In terms of getting your menus to display correctly, I might suggest that the reason the transitions look choppy -- as you say, "odd" -- is because you're probably only transitioning on the max-height of the nav ul uls. You're not, however, doing anything about the content of those uls. You might try fading in the list items as a separate transition... In other words, your list items are displaying (floating, as it were) above your yet-to-have-transitioned unordered lists, and hence why your menus look odd when you hover them... I'd be happy to give you some more feedback after I toy around with your CSS for a little bit, but hopefully what I'm saying makes sense to you!
Good luck!
–J.
Graham Davidson
Courses Plus Student 14,966 PointsHi J thanks for that and thanks for the comments
I am only playing with transitions at present and also design so its early days.
G
Graham Davidson
Courses Plus Student 14,966 PointsTurns out all I had to do was slap on some overflow:hidden
Works like a dream now.
J.T. Gralka
20,126 PointsVery, very clever! :-)
Daniel Lewis
1,437 PointsDaniel Lewis
1,437 PointsMove this to the CSS Topic.