Menú Flotante Nro2

Pasa El Cursor Por "Sites"

Sites

Tumblr Facebook Twitter Ask.fm follow+

Copia El Código & Pégalo En Gadget HTML/javascript

<div style="position:fixed;top:10px;left:10px;">
<div id="wtf">TITULO
<div id="lol">
<a href="">link</a>
<a href="">link</a>
<a href="">link</a>
<a href="">link</a>
<a style="border-radius: 0px 0px 10px 10px;" href="">link</a>
</div></div></div>
<style>
#wtf {background:#FACFCA; /* FONDO DEL TITULO */
padding:7px;
width:130px; /* ANCHO DEL TITULO */
display: inline-block;
transition: all 0.5s ease;
-o-transition-transition:  all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
border-radius:5px;
text-align:center;
}
#wtf:hover #lol {
opacity:3;
-webkit-transition-duration:.7s;
overflow:hidden;
z-index:966666666666666666666666666666666666666669;
height:auto;
}

#lol {
font-family: calibri; /* FUENTE DE LOS LINKS */
font-size: 12px; /* TAMAÑO DE LETRA DE LINKS */
margin-top:1px;
margin-left: -7px;
position:absolute;
overflow:hidden;
line-height: 20px;
padding: px;
opacity:0;
transition: all 0.5s ease;
-o-transition-transition:  all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
width:150px;
}
#lol a{
background:#FAE1DE; /* FONDO DE LOS LINKS */
color: #fff; /* COLOR DE LOS LINKS */
width:144px; /* ANCHO DE LOS LINKS */
text-align:center;
display:block;
line-height: 20px;
transition: all 0.5s ease;
-o-transition-transition:  all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
border-top:3px solid #fff;
}

#lol a:hover{
color:#fcc; /* COLOR DE LOS LINKS {HOVER} */
background: #fff; /* FONDO DE LOS LINKS {HOVER} */
opacity:100; transition: all 0.5s ease;
-o-transition-transition:  all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
</style>