Animate height of menu bar in CSS - html

Question

What I really want is to have the same effect on the website of www.ditto.com by the menu, if anyone can figure that out, it would be really great, but if not this is what I have and please if anyone can answer this question, I'm in the middle of making a website for someone and I need this info fast!!
This code waits 0.8s when going up but it doesn't wait when it goes down, it just pops down.
Thanks in advance!!
You can see the full code here here: http://jsfiddle.net/zZPPR/
CSS
.one
{
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 0.8s;
}
.two
{
max-height: 200px;
overflow:visible;
}

Answer 1

Here is a solution that target the second animation in the link. Still a draft though.
http://jsfiddle.net/NicoO/T4Nbk/5/
Update: Max-height is causing speed issues, making the feeling the transition too fast or slow. Here is an alternative solution using transforms: http://jsfiddle.net/NicoO/T4Nbk/7/ same version with Chrome vendor prefixes: http://jsfiddle.net/T4Nbk/9/
CSS:
ul
{
margin: 0;
padding: 0;
}
ul > li
{
display: inline-block;
position: relative;
}
ul > li li
{
display: block;
}
ul > li:before
{
background-color:gray;
top: 100%;
bottom:0;
left: 0;
right: 0;
position: absolute;
content: "";
transition-duration: 0.4s;
z-index:-1;
}
ul > li a
{
display: block;
position: relative;
}
ul > li ul
{
max-height: 0;
overflow: hidden;
position: absolute;
left:0;
width: 300px;
background-color: gray;
transition-duration: 0.4s;
transition-property: max-height;
}
ul > li:hover:before
{
top:0;
}
ul > li:hover ul
{
max-height: 400px;
}
HTML:
<nav>
<ul>
<li>Home</li>
<li>News & Events</li>
<li>
Discover
<ul>
<li>Jordan</li>
<li>Jordan</li>
</ul>
</li>
</ul>
</nav>
CSS of the solution using transforms:
Inspired by: How can I transition height: 0; to height: auto; using CSS?
ul
{
margin: 0;
padding: 0;
}
ul > li
{
display: inline-block;
position: relative;
}
ul > li li
{
display: block;
}
ul > li:before
{
background-color:gray;
top: 100%;
bottom:0;
left: 0;
right: 0;
position: absolute;
content: "";
transition-duration: 0.4s;
z-index:-1;
}
ul > li a
{
display: block;
position: relative;
}
ul > li ul
{
transform: scaleY(0);
transition: transform 0.4s;
transform-origin: top;
overflow: hidden;
position: absolute;
left:0;
width: 300px;
background-color: gray;
}
ul > li:hover:before
{
top:0;
}
ul > li:hover ul
{
transform: scaleY(1);
}

Answer 2

What's happening is that you're not transitioning the overflow property. So as soon as the class two is applied, the overflow is set to visible and the content shows immediately.

Answer 3

Remove the overflow:visible from the class .two and it will work
JSFIDDLE

Answer 4

You should remove overflow:visible;