Currently, I have implemented a code snippet to showcase a menu along with displaying submenus upon hovering over the main menus. Now, I am looking to introduce some animation effects for the submenus when they appear, similar to the slideUp and slideDown functions in jQuery. However, my goal is to accomplish this using only CSS. What modifications should be incorporated into the existing code to achieve this desired effect?
<div id="main_nav">
<ul>
<li >
<a href="#" >Item 0</a>
</li>
<li>
<a href="#">
Item 1
</a>
<ul class="sub-menu">
<li><a href="#">Item 1 0</a></li>
<li><a href="#">Item 1 1</a></li>
<li><a href="#">Item 1 2</a>
<ul class="sub-menu">
<li>
<a href="#">Item 1 2 0</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">
<span>Item 3</span>
</a>
<ul class="sub-menu">
<li><a href="#">Item 3 0</a></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;
}
/* Add your potential CSS animations here */
#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%;
}