Claro, el margen no va a servir porque estan en posicion absoluta, en lugar de ponerle un margen en el segundo div que tiene el id capa_contenedora en donde dice style="left:-130" agregale style="left:-130; top:80px;" ya que el primero esta en 50px, el segundo lo puedes poner en 80, el tercero en 110 y asi sucesivamente.
Ahora tienes otro problema:
El javascript no te va a servir. por qué? porque el javascript mueve el div con el id capa_contenedora y los dos se llaman capa_contenedora, es decir no va a distinguir cual mover.
Ya con todos los cambios, quedaria asi:
Código:
<html>
<head>
<title>inkfusion</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
.capa_contenedora{
position:absolute;
width:170px;
/*height:50px;*/
background:#000000;
z-index:4;
}
.text{
color:#FFFFFF;
margin-left:15px;
font-family:Arial, Helvetica, sans-serif;
}
</style>
<script language="javascript">
var SalirMenu=0,Nuevo=0;
function aparecer(id){
Nuevo=parseFloat(document.getElementById(id).style.left)+2;
document.getElementById(id).style.left=Nuevo+"px";
if(Nuevo<0 && SalirMenu==1){
setTimeout("aparecer('"+id+"')",1);
}
}
function desaparecer(id){
Nuevo=parseFloat(document.getElementById(id).style.left)-2;
document.getElementById(id).style.left=Nuevo+"px";
if(Nuevo>-150 && SalirMenu==0){
setTimeout("desaparecer('"+id+"')",1);
}
}
</script>
</head>
<body>
<div id="illustration" class="capa_contenedora" style="left:-150; top:50px;" onMouseOver="SalirMenu=1;aparecer('illustration');" onMouseOut="SalirMenu=0;desaparecer('illustration');">
<div class="text">
ILLUSTRATION
</div>
</div>
<div id="gdesign" class="capa_contenedora" style="left:-150; top:80px;" onMouseOver="SalirMenu=1;aparecer('gdesign');" onMouseOut="SalirMenu=0;desaparecer('gdesign');">
<div class="text">
GRAPHIC DESIGN
</div>
</div>
</body>
</html>