Estou usando esse código simples abaixo, só que não é nada parecido com o das imagens....falta o fundo preto e o formato em tabela.
<head><style>/* fazendo a estilização visual via CSS */ li { list-style: square } .aberto{ display:block; } .paiaberto{ list-style: circle; list-style-image: url(folderopen.gif); } /* espaçamento pro IE */ * html .paiaberto { padding-left: 5px; } .fechado{ display:none; border: 1px solid gray } .paifechado{ list-style: disc; list-style-image: url(folderclosed.gif); } /* espaçamento pro IE */ * html .paifechado { padding-left: 7px;}</style><script>/* atalho para o getElementById */function ge(q){ return document.getElementById(q)}function Menu(evt,id) { /* função que muda a classe CSS dos elementos da lista de forma a abrir e fechar a árvore */ if(typeof(evt)=='undefined')var evt=window.event //pegando o li pai do link var lipai = id.parentNode; //pegando o primeiro ul var ulfilho = id.parentNode.getElementsByTagName ("ul")[0]; if(ulfilho.className.indexOf('aberto')<0 && ulfilho.className.indexOf('fechado')<0){ //definindo um estado inicial caso nao haja ulfilho.className = ulfilho.className + " aberto"; } if(lipai.className.indexOf('paiaberto')<0 && lipai.className.indexOf('paifechado')<0){ //definindo um estado inicial caso nao haja lipai.className = lipai.className + " paiaberto"; } //fazendo a troca if(ulfilho.className.indexOf('aberto')>-1){ ulfilho.className = ulfilho.className.replace("aberto","fechado"); }else{ ulfilho.className = ulfilho.className.replace("fechado","aberto"); } //mudando a imagem do li pai if(lipai.className.indexOf('paiaberto')>-1){ lipai.className = lipai.className.replace("paiaberto","paifechado"); }else{ lipai.className = lipai.className.replace("paifechado","paiaberto"); } if(typeof(evt.preventDefault)=='undefined'){ evt.returnValue = false; }else{ evt.preventDefault() } return false;}function ativaMenus(ul_pai){/* função que ativa os menus */ if(ul_pai.constructor == String) ul_pai = ge(ul_pai) //ativando os cliques var links = ul_pai.getElementsByTagName("a"); for (var i=0; i < links.length ; i++){ //vendo se é link que está dentro de um li com filhos if(links[i].parentNode.getElementsByTagName("ul").length>0){ links[i].onclick = function(ev){ Menu(ev,this) } } } //fechando todos os li var lis = ul_pai.getElementsByTagName("li"); for (var i=0; i < lis.length ; i++){ if(lis[i].getElementsByTagName("ul").length>0){ lis[i].className += " paifechado"; //fechando todos inicialmente }} //fechando todos os ul inicialment var uls = ul_pai.getElementsByTagName("ul"); for (var i=0; i < uls.length ; i++){ uls[i].className += " fechado"; }}//abaixo eu chamo a função pra ativar os menus, passando como parametro o ID do ul que é pai dos menus.window.onload = function() { ativaMenus('menuteste') }</script></head><body> <ul id="menuteste"> <li><a href="#">itens 1</a> <ul> <li><a href="#">itens 1.1</a> <ul> <li><a href="#">itens 1.1.1 </a></li> <li><a href="">itens 1.1.2</a></li> <li><a href="">itens 1.1.3</a></li> </ul> </li> <li><a href="">itens 1.2</a></li> <li><a href="">itens 1.3</a></li> <li><a href="">itens 1.4</a></li> </ul> </li> <li><a href="#">itens 2</a> <ul> <li><a href="#">itens 2.1</a></li> <li><a href="">itens 2.2</a></li> <li><a href="">itens 2.3</a></li> <li><a href="">itens 2.4</a></li> </ul> </li> </ul></body>