AJAX - Expandir div al pasar por encima con el raton

Buenas, he echo algunas cosas en ajax, pero aun soy muy nobato en esto, y lo que me gustaria es lo siguiente:

Una pestaña, que al pasar el mouse por encima, se expanda y cargue contenido en ella.

he conseguido que se "expanda" de una forma sencilla, aunque me gustaria que lo hiciera ralentizandose, o sea no de golpe.

Otro problema que tengo es que centrodesplegable ha de ser de 20px de alto, y el maxidesplegable ha de ser al principio de 20px, pero desplegado de 80px, pero que no alargue el div contenedor, sino que quede por encima tapando el siguiente div, superponiendose a ellos. no se si me he explicado bien.

Por si acaso, les pongo el codigo de lo quehay de momento:

[HTML]
<div id='centrodesplegable'>
<div class="minidesplegable" onmouseover="this.className='maxidesplegable'" onmouseout="this.className='minidesplegable'">
Vols unirte?
</div>
</div>
<div id='centro'>
<!--aqui va el contenido de la pagina que sera medio tapado por la pestaña cuando se expanda.-->
</div>
[/HTML]

[CODE]
#centrodesplegable{
background: #cebca4;
width: 800px;
margin:auto;
text-align:center;
border-bottom:solid #1A1A10 0px;
}
.minidesplegable{
z-index:2;
background:#000;
height:20px;
width:400px;
overflow:visible;
text-align: center;
margin: auto;
font-size:16px; font-family: Arial, Helvetica, sans-serif; font-style: normal; font-weight:600; color: #3399ff;
}
.maxidesplegable{
z-index:2;
background:#fff;
height:80px;
width:400px;
overflow:visible;
text-align: center;
margin: auto;
font-size:16px; font-family: Arial, Helvetica, sans-serif; font-style: normal; font-weight:600; color: #3399ff;
}
[/CODE]

Si alguien puede ayudarme o darme alguna idea de alguna solucion?

he buscado bastante por internet y no encuentro nada parecido.

Gracias de antemano

Bien. No se si ya se te ha respondido a esta duda, pero por si acaso lo haré yo.

Lo primero lo de que se superponga. Para que al ampliar un div se superponga al resto su posicion deberá ser absoluta. En cuanto la pones relativa y los divs de abajo o arriba o los que quieras que sean superpuestos por el otro tambien, automaticamente coge su posicion.

En cuanto a que se haga ralentizado, yo lo hago con dos funciones recurrentes que se llaman una a la otra hasta que el div tenga el aspecto que quieras. Para ello no hace falta que cambies la clase del div. En una funcion pones

if(document.getElementById('tu_div').offsetHeight < tamaño_maximo) {
document.getElementById('tu_div').style.height = document.getElementById('tu_div').offsetHeight+1+"px";
funcion_2();
}

y en la otra no pones mas que:

setTimeout("funcion_1()", tiempo_espera);

Donde el tiempo de espera se mide en milisegundos.

Espero que, si todavia sigues con esto, te sirva. Y si no, pues que le sirva a alguien! ;)