hola, tepaso algo muy simple, que te pude servir.
Código HTML:
<html>
<head>
<script>
function ver(c,v){
document.getElementById(c).style.visibility=v;
}
</script>
</head>
<body>
<div id="capa1" style="position:absolute; left:39px; top:20px; width:286px; height:35px; z-index:1; background-color: #99CCFF; layer-background-color: #99CCFF; border: 1px none #000000; visibility: hidden;"></div>
<div id="capa2" style="position:absolute; left:39px; top:35px; width:286px; height:35px; z-index:1; background-color: #FFFFCC; layer-background-color: #FFFFCC; border: 1px none #000000; visibility: hidden;"></div>
<div id="capa3" style="position:absolute; left:39px; top:50px; width:286px; height:35px; z-index:1; background-color: #99CCCC; layer-background-color: #99CCCC; border: 1px none #000000; visibility: hidden;"></div>
<span onmouseover="ver('capa1','visible')" onmouseout="ver('capa1','hidden')">link1</span><br>
<span onmouseover="ver('capa2','visible')" onmouseout="ver('capa2','hidden')">link2</span><br>
<span onmouseover="ver('capa3','visible')" onmouseout="ver('capa3','hidden')">link3</span><br>
</body>
</html>
no se el grado de complegidad que querés, pero te puede servir para empezar, luego podés jugar con la posicion de otros elementos y hasta con la del raton( por algun lado ví uno bastante bueno que tomaba la posicion del raton, pero no me acurdo donde estaba)
espero te sirva, saludos.