cargar contenido al pasar por encima

[klareNs]

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:

Código 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> 

Código:

#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;
}

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

he buscado bastante por internet y no encuentro nada parecido.

Gracias de antemano