<ul id="menu">
<li><a href="#">main</a></li>
<li style="display: none;">
<ul>
<li><a href="#">1-st</a></li>
<li><a href="#">2-nd</a></li>
<li><a href="#">3-rd</a></li>
</ul>
</li>
</ul>
<script>
var menu = document.getElementById('menu'),
child = menu.getElementsByTagName('li');
child[0].onclick = function() {
child[1].style.display = child[1].style.display === 'block' ? 'none' : 'block';
return false;
};
</script>
пример