A mi parecer lo mejor es usar un poco de javascript con un poco de CSS para lograr el efecto que deseas.
Te dejo una ejemplo basico para que te des cuenta como seria la idea:
Código:
<html>
<head>
<style type="text/css">
<!--
ul {display:inline; margin:0}
li {list-style: none;}
ul.sub li {margin-left: 15px;}
#algo, #otra {display: none;}
-->
</style>
<script type="text/javascript">
<!--
function cambiar(que)
{
var sub = document.getElementById(que);
sub.style.display = sub.style.display == 'block' ? 'none' : 'block';
}
-->
</script>
</head>
<body>
<ul>
<li><a href="#" onClick="cambiar('algo')">algo</a></li>
<li id="algo">
<ul class="sub">
<li>jkhkl</li>
<li>jkjkljkl</li>
<li>kljhklhkl</li>
</ul>
</li>
<li><a href="#" onClick="cambiar('otra')">otra cosa</a></li>
<li id="otra">
<ul class="sub">
<li>df dsfsd f</li>
<li>dfg gfdg </li>
<li>fgd fgfdg</li>
</ul>
</li>
</ul>
</body>
</html>