slideUp/slideDown using Pure CSS - css

Question

I am using the following code to display menu and display submenu when hovered on the menus. I want to add some animation for the submenu when it is displayed like what slideUp and slideDown in jQuery. But I want to use pure CSS for this. What alterations should I make in the code do achieve it?
<div id="main_nav">
<ul>
<li >
<a href="#" >Item 0</a>
</li>
<li>
<a href="#">
Item 1
</a>
<ul class="sub-menu">
<li>Item 1 0</li>
<li>Item 1 1</li>
<li>Item 1 2
<ul class="sub-menu">
<li>
Item 1 2 0
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">
<span>Item 3</span>
</a>
<ul class="sub-menu">
<li>Item 3 0</li>
</ul>
</li>
</ul>
</div>
#main_nav ul,#main_nav ul ul{
margin:0;
list-style:none;
padding:0;
}
#main_nav ul ul{
display:none;
position:absolute;
left:0;
top:100%;
background-color:#1b1b1b;
padding:0 10px 10px;
}
#main_nav ul li:hover>*{
display:block;
}
#main_nav ul li{
position:relative;
display:block;
white-space:nowrap;
font-size:0;
float:left;
}
#main_nav ul li:hover{
z-index:1;
}
#main_nav ul ul ul{
position:absolute;
left:100%;
top:0;
}
#main_nav ul{
font-size:0;
z-index:999;
position:relative;
display:inline-block;
padding:0;
display:inline;
}
* html #main_nav ul li a{
display:inline-block;
}
#main_nav ul>li{
margin:0;
}
#main_nav ul a{
display:block;
vertical-align:middle;
text-align:left;
text-decoration:none;
font-size:12px;
color:#000;
cursor:pointer;
padding:10px;
background-color:#FFFFFF;
}
#main_nav ul ul li{
float:none;
margin:10px 0 0;
}
#main_nav ul ul a{
text-align:left;
padding:4px;
background-color:#1b1b1b;
font-size: 12px ;
color:#FFF;
}
#main_nav ul li:hover>a{
background-color:#000000;
color:#2b97dd;
opacity:90%;
}
#main_nav ul ul li:hover>a{
background-color:#000000;
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
opacity:90%;
}
Fiddle: http://jsfiddle.net/Midhun28/ZstjT/

Answer 1

One possible way to fake it in plain CSS is by animating the top property:
li{
z-index: 10; /* <- must appear above the animation */
}
ul ul{
visibility: hidden;
top: -100%;
z-index: -5;
opacity: 0;
transition: visibility 0s linear 0.4s, opacity .3s linear, top .3s ease-out;
}
li:hover > ul{
visibility: visible;
opacity: 1;
top: 58px;
transition-delay: 0s;
}
And hide the overflow on the menu container, or put some element with higher z-index above the menu and fill it with color.
Here's an example. I've clean-up up some of your CSS, much of it was not needed

Answer 2

I recently wanted to see what was the jQuery SlideUp doing in attribute style, so I tried to take a screenshot (easier to see than looking at the code :P)
Here it is :)
So, it's possible to replicate this animation with CSS3.
Just animate the margin, padding and height and you will be able to get the same effect as jQuery.