Menú vertical con imagen "montada" en Hover

[LinkLooker]

Saludos a todos..quiero hacer un menu, donde en el hover aparezca una imagen, este caso quiero que sea un "ribbons"..de esos que se ven como "montados" en el borde de su contenedor

Un ejemplo del menú que quiero lo pueden ver en:www.mysterytin.com/


Donde en el hover se muestra una imagen parecida a la que tengo..

acá mi codigo html:

Código HTML:

<div id="menu">
 
<ul class="botonera">
<li><a href="#"></a>Link 1</li>
<li><a href="#"></a>Link 2</li>
<li><a href="#"></a>Link 3</li>
 
</ul>
 
</div>
 

codigo css:

Código CSS:

#menu
{width:200px; height:500px; background-color: #FFF; float:left;
-webkit-box-shadow: 6px 6px 29px rgba(50, 50, 50, 0.5);
-moz-box-shadow: 6px 6px 29px rgba(50, 50, 50, 0.5);
box-shadow: 6px 6px 29px rgba(50, 50, 50, 0.5);
margin: 10px 0px 0px 10px;;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
padding-top:40px;
 
}
 
 
ul.botonera {
width: 100%;
list-style: none;
margin: 0;
padding: 0;
/*border: 1px solid #7C7C7C;*/
font-family:Tahoma, Geneva, sans-serif;
}
 
ul.botonera li {
margin-top:10px;
border-bottom: 1px solid #7C7C7C;
border-top: 1px solid #7C7C7C;
background: #F4F4F4;
}
 
ul.botonera li a {
padding: 25px 25px 25px 25px;
/*height:0px;*/
display: block;
text-decoration: none;
color: #333;
background-color: #F4F4F4 ;
}
 
ul.botonera li a:hover {
background-color: #F60; background:url(img/menu_boton_objetivos.png) no-repeat; background-position:-10px; ;
}
 
ul.botonera li a:active { background-color:#ccc}
 

Gracias por cualquier ayuda que me puedan prestar....Saludos a todos!!!

[ArturoGallegos]

1.- procura utilizar el highlight adecuado a tu código, así tal cual es mas complicada su lectura.

2.- no termino de entender cual es tu problema, por favor explicalo un poco mas detallado, he indica que parte de todo este código es el que lo involucra.

[pzin]

El ribbon se puede hacer con CSS puramente. Usando pseudo-elementos y el truco aquel de los bordes para hacer un triángulo.

Un ejemplo funcional:



Edito: Aparte de usar highlight o code, tampoco estaría de menos no repetir temas/mensajes.

[LinkLooker]

SAludos..GRacias por responder..

El asunto es que l aimahen no se me monta en el div y no da el efecto que quiero...

Cuando le pongo el padding negativo, lo que hace es que me esconde esa parte de la imagen pero no se monta sobre el div menu...

Si se fijan en el ejemplo de la pagina que coloque..verán como es el menu que quiero lograr.


Gracias de antemano

[hackjose]

Para el ultimo pico puedes usar el pseudoelemento after
http://jsfiddle.net/2S9Ed/1/

El codigo es de pzin solo lo modifique tantito

salu2