Div Desplegable

[polpolpol]

Buenas amigos del foro!!

Aqui estoy con una duda!!

Tengo una imagen y quiero aparesca un div por debajo de esta cuando el mouse este sobre la imagen.

Código HTML:

<div id="imagen">
<img src="Green day.jpg"  onmouseover="document.getElementById('texto').style.display=''; " onmouseout="document.getElementById('texto').style.display='none';">
</div>
 
<div id="texto" style="display:none;  ">
<h1>Esto es una prueba</h1>
</div>
 
<h1>Que no se mueva esto</h1>
 

Hasta aqui bien pero lo que quiero es que no me deforme la pagina al poner el mouse sobre la imagen y se despliegue el div.

Asi como se muestra en el menu superior de esta web.

Desde ahora gracias por la atencion al mensaje y a sus sugerencias!!