Div coulissante rétractable

Bonjour,
Mes compétences sont limitées mais j’ai des projets comme le suivant :
Div coulissante et rétractable qui s’intercale au dessus du wrapper.
J’ai créé un menu qui actuellement au survol affiche la div au dessus de la partie supérieure du wrapper. Comment faire pour qu’elle s’intercale en poussant le wrapper vers le bas ?
Je souhaite également que cette div puisse rester affichée. Pour cela, j’ai créé une série de bouton.
J’ai imaginé un bouton « AFFICHER » qui passerait à l’état « GARDER OUVERT » au survol. Un clic pour fixer la div. Le bouton passerait à l’état « FERMER » clic pour faire disparaitre la Div et retour du Wrapper à sa position normale.
Dans l’affichage que de bizarreries.
Voici le code qui me permet néanmoins d’afficher la Div au survol du menu
Bien compliqué pour le débutant que je suis.
Merci pour votre aide
[code=<div id="header">
<h1 style="text-align: center;">Header</h1>
</div>

<div id="coulissant">
<div id="nav">
<ul>
<li style="background:#C6D9F1;"><a href="#">A</br>lien vers</br>autre page</a><div style="background:#C6D9F1;"><h1>contenu A</h1>
<p class="textj">peut contenir : </br>
du texte, </br>
des images,</br>
des liens . . .</p></div></li>
<li style="background:#F2DBDB;"><a href="#">B</br>lien vers</br>autre page</a><div style="background:#F2DBDB;"><h1>contenu B</h1></div></li>
<li style="background:#EAF1DD;"><a href="#">C</br>lien vers</br>autre page</a><div style="background:#EAF1DD;"><h1>contenu C</h1></div></li>
<li style="background:#E5DFEC;"><a href="#">D</br>lien vers</br>autre page</a><div style="background:#E5DFEC;"><h1>contenu D</h1></div></li>
<li style="background:#FDE9D9;"><a href="#">E</br>lien vers</br>autre page</a><div style="background:#FDE9D9;"><h1>contenu E</h1></div></li>
</ul>
</div>

<div class="bouton"><a href="#">AFFICHER</a><div style="background:#C6D9F1;"><h1>contenu A</h1></div></div>
<div class="bouton"><a href="#">GARDER OUVERT</a><div style="background:#F2DBDB;"><h1>contenu B</h1></div></div>
<div class="bouton"><a href="#">FERMER</a><div style="background:#EAF1DD;"><h1>contenu C</h1></div></div>
<div class="bouton"><a href="#">AFFICHER</a><div style="background:#E5DFEC;"><h1>contenu D</h1></div></div>
<div class="bouton"><a href="#">AFFICHER</a><div style="background:#FDE9D9;"><h1>contenu E</h1></div></div>


</div>

<div id="wrapper">

<h1 style="text-align: center;">Wrapper</h1>

</div>][/co<style>
html{background: #c0c0c0;}

body{
width:1000px;
height: 800px;
margin: 0px auto;
}

#header{
position: relative;
width: 1000px;
height: 100px;
background: #D8D8D8;
}

#coulissant{
position: absolute;
width: 1000px;
height: auto;
}

#wrapper{
position: relative;
top: 125px;
width: 960px;
height: 400px;
background: #fff;
padding: 20px;}

#nav {
position: relative;
top: 1px;
left: -40px;
width: auto;
z-index: 10;
display: block;
background: transparent;

}

#nav li {
padding: 3px 0px;
width: 128px;
margin-left: 60px;
list-style-type : none;
float: left;
height: 58px;
text-align: center;
display: block;
}

#nav a{
display : block;
color : #666;
text-decoration : none;
}

#nav li a {
text-decoration: none;
padding: 0px 0px;
display: block;
}

#nav li a:hover {
color: #fff;
}
#nav ul li div{
position:absolute;
top: 85px;
left: 0px;
z-index:50;
padding:15px;
padding-top:0px;
background-color: #EFF5FF;
overflow:hidden;
color: #323C50;
opacity:0;
height: auto;
margin-top:0px;
display:block;
font-size: 18px;
}
#nav ul li:hover div{
overflow:hidden;
left:40px;opacity:1;
width:970px;
display: block;
}
.bouton{
position: relative;
float: left;
width: 123px;
margin-top: 3px;
margin-left: 60px;
text-align: justify;
background: #EAEAEA;
font-size: 12px;
padding: 2px 0px 2px 5px;
}
.bouton div{
position:absolute;
top: 85px;
left: 0px;
z-index:50;
padding:15px;
padding-top:0px;
background-color: #EFF5FF;
overflow:hidden;
color: #FFF;
opacity:0;
height: auto;
margin-top:0px;
display:block;
font-size: 18px;
}
.bouton:hover div{
overflow:hidden;
top: 42px;
left:40px;opacity:1;
width:970px;
display: block;}


.bouton a{
text-decoration: none;}


h1{text-align: center;}


.textj{text-align: justify;}
</style>de]