меню добавляй сколько угодно
<style>
#div ul li {
overflow: hidden;
}
.anim {
overflow: hidden;
transition: all 1s;
-webkit-transition: all 1s;
height: 0px;
}
</style>
<body>
<ul id="div">
<li class="active"> 1
<ul class="anim">
<li >1</li>
<li >2</li>
<li >3</li>
</ul>
</li>
<li class="active"> 2
<ul class="anim">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li class="active"> 3
<ul class="anim">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
</ul>
</body>
<script>
var div = document.getElementById('div');
div.addEventListener('click', function (e) {
e = e.target || e.srcElement;
var flag;
if(!e.className.match(/active/)) return;
var h = e.children[0].scrollHeight
if(e.children[0].style.height == h+'px') flag = true;
var len = e.parentNode; len = len.children;
for(var i = 0; i < len.length; i++) len[i].children[0].style.height = 0 + 'px';
if(flag) return;
e.children[0].style.height = h+'px';
},false)
</script>