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:
<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:
#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!!!