Простой примерчик:
<html>
<head>
<title>Layers</title>
<style type="text/css">
#lay1{
position:absolute;
top:100px;
left:100px;
visibility:visible;
background-color:yellow;
width:100px;
border:solid black 1px;
}
</style>
<script languare="JavaScript">
function show2()
{
if(document.getElementById("lay1").style.visibility=="hidden")
{
document.getElementById("lay1").style.visibility="visible";
document.getElementById("bt1").value="Спрятать";
}
else
{
document.getElementById("lay1").style.visibility="hidden";
document.getElementById("bt1").value="Показать";
}
}
function show0(){
document.getElementById("lay1").style.visibility="visible";
document.getElementById("bt1").value="Спрятать";
}
function show1(){
document.getElementById("lay1").style.visibility="hidden";
document.getElementById("bt1").value="Показать";
}
</script>
</head>
<body>
<div id="lay1">Слой</div>
<form name="frm1">
<input type="button" value="Спрятать" id="bt1" onclick="show2()">
<a href='#' onMouseover='show0()' onMouseout='show1()'>cghznfnm</a>
</form>
</body>
</html>
* * *
Полноценное выдвижное меню.
<html>
<head>
<title>Layers</title>
<style type="text/css">
#lay1{
position:absolute;
top:15px;
left:65px;
visibility:visible;
background-color:yellow;
width:150px;
border:solid black 1px; }
#lay2{
position:absolute;
top:15px;
left:195px;
visibility:visible;
background-color:#0f0;
width:150px;
border:solid black 1px; }
#lay3{
position:absolute;
z-index:-1;
top:0px;
left:0px;
visibility:visible;
background-color:#fff;
width:200px;
height:200px;
border:solid black 0px; }
#lay4{
position:absolute;
top:35px;
left:195px;
visibility:visible;
background-color:#f00;
width:150px;
border:solid black 1px; }
</style>
<script languare="JavaScript">
function show2(n,m){
document.getElementById("lay"+n).style.visibility="visible";
document.getElementById("lay"+m).style.visibility="hidden"; }
function show3(){
document.getElementById("lay2").style.visibility="hidden";
document.getElementById("lay4").style.visibility="hidden"; }
function show0(){
document.getElementById("lay1").style.visibility="visible"; }
function show1(){
document.getElementById("lay1").style.visibility="hidden";
document.getElementById("lay2").style.visibility="hidden";
document.getElementById("lay4").style.visibility="hidden"; }
</script>
</head>
<body>
<div id="lay3" onMouseover='show1()' onMouseout=''> </div>
<div id="lay1"onMouseout=''>
<a href='#' onMouseover='show2(2,4)'>Слой2</a><br>
<a href='#' onMouseover='show2(4,2)'>Слой4</a><br>
<a href='#' onMouseover='show3()'>Слой1</a>
</div>
<div id="lay2" onMouseover='' onMouseout='show1()'>Слой2</div>
<div id="lay4" onMouseover='' onMouseout='show1()'>Сло4</div>
<form name="frm1">
<a href='#' onMouseover='show0()' onMouseout=''>cghznfnm</a>
</form>
</body>
</html>