Desplegable con CSS

[Dracknes]

Buenas, estoy haciendo un trabajo web de clase y le estoy implementando un desplegable en la parte superior izquierda. Esa parte es fija, y está "contraida" y lo que quiero es que al pasar el ratón por encima se "descontraiga".

Os pongo una imagen para que os resulte más facil entender lo que digo.



Quiero que al pasar el ratón por la pestaña del circulo se me despliege (encima de la propia pestaña) una más grande.

Quedando como resultado esto:



Tengo realizado un menú con css que hace basicamente eso, mostrar un desplegable debajo con distintos links. Había pensado que se podía hacer igual, pero no lo consigo.

Me podéis echar una mano?

Un saludo.

[cristian_cena]

Hola Dracknes:

Código CSS:

#boton{
display:block;
width:...;
height:...;
position:absolute;
top:...; left:-50px;
background:url('ruta/laimagendelboton.xxx') 0 0 no-repeat;
/*puedes usar line-height o padding si el texto del boton es texto html*/
}
#boton:hover{
left:0px; /*cambiamos la posición, como antes era negativa y ahora le damos "cero" se mostrará por completo el boton. juega con estos valores según tu diseño.*/
}
 

Espero te haya sido útil. Un abrazo.

[Dracknes]

Perfecto!

Muchas gracias.

[cristian_cena]

no hay de que mi estimado ;)