Menú desplegable algo distinto

[levhita]

yo he usado algo como esto:

Me hago unos scripts que pueden esconder y mostrar elementos asumiendo que el id sea único.

Código:

<script type="text/javascript">
<!--
var browserType;
if (document.layers) {browserType = "nn4"}
if (document.all) {browserType = "ie"}
if (window.navigator.userAgent.toLowerCase().match("gecko")) {browserType= "gecko"}

function show(what) {
  if (browserType == "gecko" )
     document.poppedLayer = eval('document.getElementById(\''+what+'\')');
  else if (browserType == "ie")
     document.poppedLayer = eval('document.all[\''+what+'\']');
  else
     document.poppedLayer = eval('document.layers[\''+what+'\']');
  document.poppedLayer.style.display = "block";
}

function hide(what) {
  if (browserType == "gecko" )
     document.poppedLayer = eval('document.getElementById(\''+what+'\')');
  else if (browserType == "ie")
     document.poppedLayer = eval('document.all[\''+what+'\']');
  else
     document.poppedLayer = eval('document.layers[\''+what+'\']');
  document.poppedLayer.style.display = "none";
}
//-->
</script>

Y en el código hago algo como esto:

Código HTML:

<li><a href="javascript:show('cat1');">Categoría 1</a></li>
  <div id="cat1" style="display:none;">
    <!--  lista de sub enlaces-->
  </div> 

Sólo hay que extender el concepto a toda la lista.