Hola Al Zuwaga...
Lei tu primer post yme puse a trabajar para ver sipdia lograr lo que planteabas... ahora vuelvo y hay mil mensajes mas!!!
De todas formas te posteo a lo que llegue, aunque se que es bastante flojo porque sirve basicamente para el ejemplo dado y habria que cambiarle muchas cosas para adaptarlo a otros casos... ademas le agregue todo el javascript adentro muy en contra detodos los estandares
Pero bueno, espero que te sirva un poquito aunque sea.
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {margin:0; padding:0; width:250px;}
h2 { background-color:#F60; padding: 5px; border-bottom: 2px solid #F1F1F1; margin:0;}
ul#parent { margin:0; list-style:none; background-color:#F99; padding:0; height:250px; }
ul#parent li { float:left; width:50%; background: #F1F1F1; height: 25px;}
ul#parent li a { display:block; width:auto; height: 25px; background-color:#090; color:#FFF; text-align:center; margin: 0 2px 2px 2px;}
ul#parent li a:hover {background-color:#F99; color:#000; }
ul#parent li.selected a {display:block; height: 25px; border: 0; background-color:#F99; color:#000; margin:0;}
ul#parent li ul { display:none; background-color:#F99; margin-top: 20px; width: 170px; position: absolute; left: 30px;}
ul#parent li.selected ul {display: block; }
ul#parent li ul li { float:none; background-color:#F99; width:auto; }
p {clear:both; display: block; padding:5px; margin:0; background-color:#666; color: #FFF; }
-->
</style>
<script type="text/javascript">
<!--
function activar(mostrar,ocultar)
{
mostrar = document.getElementById(mostrar);
mostrar.className = 'selected';
ocultar = document.getElementById(ocultar);
ocultar.className = '';
}
-->
</script>
</head>
<body>
<h2>Lorem ipsum</h2>
<ul id="parent">
<li id="op_1" class="selected">
<a href="#" onclick="activar('op_1','op_2'); return false">Phasellus</a>
<ul>
<li>Consectetuer</li>
<li>Duis</li>
<li>Fusce vitae</li>
<li>Ut pharetra</li>
<li>Donec tincidunt</li>
</ul>
</li>
<li id="op_2">
<a href="#" onclick="activar('op_2','op_1'); return false">Urna</a>
<ul>
<li>Cras at metus</li>
<li>Nam sit amet</li>
<li>Mauris gravida</li>
<li>Donec in augue</li>
<li>Donec ac mauris</li>
</ul>
</li>
</ul>
<p>Pharetra</p>
</body>
</html>