Hola,
Mira a ver si esto es lo que quieres:
Código PHP:
<html>
<head>
<script>
var desplegado = false;
function desplegar(id_div)
{
if(desplegado)
{
var divisiones = document.getElementsByTagName("div") ;
for (i = 0; i < divisiones.length; i++)
{
divisiones[i].style.display = "none";
if(divisiones[i].id == id_div)
capa = divisiones[i];
}
capa.style.display = 'block';
desplegado = true;
}
else
{
var capa = document.getElementById(id_div);
if(capa.style.display == 'none')
{
capa.style.display = 'block';
desplegado = true;
}
else
{
capa.style.display = 'none';
desplegado = false;
}
}
}
</script>
</head>
<body>
<h1>Productos</h1>
<a href="#" onclick="desplegar('menu_1'); return false;">Hardware1</a><br>
<div id="menu_1" style="display:none;">
<a href="#">Producto</a><br>
<a href="#">Producto</a><br>
<a href="#">Producto</a><br>
<a href="#">Producto</a><br>
<a href="#">Producto</a><br>
</div>
<a href="#" onclick="desplegar('menu_2'); return false;">Hardware2</a><br>
<div id="menu_2" style="display:none;">
<a href="#">Producto</a><br>
<a href="#">Producto</a><br>
<a href="#">Producto</a><br>
<a href="#">Producto</a><br>
<a href="#">Producto</a><br>
</div>
<a href="#" onclick="desplegar('menu_3'); return false;">Hardware3</a><br>
<div id="menu_3" style="display:none;">
<a href="#">Producto</a><br>
<a href="#">Producto</a><br>
<a href="#">Producto</a><br>
<a href="#">Producto</a><br>
<a href="#">Producto</a><br>
</div>
<a href="#" onclick="desplegar('menu_4'); return false;">Hardware4</a><br>
<div id="menu_4" style="display:none;">
<a href="#">Producto</a><br>
<a href="#">Producto</a><br>
<a href="#">Producto</a><br>
<a href="#">Producto</a><br>
<a href="#">Producto</a><br>
</div>
</body>
</html>
He rellenado los menus con links pero si pones tu PHp tal y como lo tenías creo que funcionará. Si no te va vuelve a postear y lo miramos a ver.