div desplegable u oculto - para clima

[pzin]

Con CSS puedes hacerlo perfectamente, de hecho sería lo ideal.

Tan sólo necesitas posicionar el elemento que quieras mostrar al pasar el ratón por encima de forma absoluta y ese elemento que se ve al principio darle una posición relativa.

Código HTML:

<div id="tiempo">
  Nublado 22º
  <div id="tiempo_ampliado">
    Máxima, mínina, humedad y demás datos.
  </div>
</div>
 

Le pones una posición relativa al contenedor:

Código CSS:

div#tiempo {
  position: relative;
}
 

Luego para que no interfiera en el resto del HTML, lo sacas del flujo natural indicando una posición absoluta, lo ajustas a dónde lo quieres tener, y lo ocultas:

Código CSS:

div#tiempo_ampliado {
  position: absolute;
  top: 100%;
  right: 0;
  display: none;
}
 

Y ya sólo te queda mostrarlo cuando se pase el ratón por encima:

Código CSS:

div#tiempo:hover div#tiempo_ampliado {
  display: block;
}
 

A grosso modo es eso. Luego ya ajustas demás cosas para visualizarlo como necesites.