expanding menu, how to have smooth slide/expand?

hello,

I use this http://www.tutorio.com/tutorial/javascript-expanding-menu and works fine,
so I want to have smooth slide/expand.

<script type="text/javascript"> 
                document.getElementById('menul').style.listStyle="none";
                document.getElementById('men1').style.display="none"; // collapse list 
                document.getElementById('men2').style.display="none";
				document.getElementById('men3').style.display="none";
				document.getElementById('men4').style.display="none";
				document.getElementById('men5').style.display="none";
				document.getElementById('men6').style.display="none";
				document.getElementById('men7').style.display="none";
				document.getElementById('men8').style.display="none"; 
				document.getElementById('men9').style.display="none";
				document.getElementById('men10').style.display="none";
				document.getElementById('men11').style.display="none";
				document.getElementById('men12').style.display="none";
				document.getElementById('men13').style.display="none";
                function toggle(list){ 
                var listElementStyle=document.getElementById(list).style; 
                if (listElementStyle.display=="none"){ 
                listElementStyle.display="block"; 
                 }
                else{ listElementStyle.display="none"; 
                 } 
                } </script>

Code (markup):

how can i do this?
thanks