css tabs based on definition list

HTML

<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>

JavaScript

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;
};