Menu cool
Primeiro, veja a preview: aqui.
Agora, cole o código seguinte no seu css (tudo o que fica entre <style> e </style>)
#oi img {border:4px solid #fff;box-shadow:2px 2px 0px rgba(0,0,0,0.1);width:200px;} #oi {width:200px;margin:auto;-webkit-transition-duration:0.2s;-o-transition-duration:0.2s;-moz-transition-duration:0.2s;} #menu { position: absolute; margin-top:-278px; margin-left: 20px; opacity: 0; -webkit-transition-duration:0.2s;-o-transition-duration:0.2s;-moz-transition-duration:0.2s; } #oi:hover #menu { opacity: 1; margin-left: -73px; z-index:111; -webkit-transition-duration:0.5s;-o-transition-duration:0.5s;-moz-transition-duration:0.5s; } #menu a { text-decoration: none; color: #757575; background: #fff; padding:4px; font-family: calibri; font-size: 10px; text-transform: uppercase; display: block; margin-left: 2px; margin-bottom: 2px; width: 60px; text-align: center; } #menu a:hover { color: #000; }
Bem, vou deixar uma coisinha clara, caso você queira aumentar a largura (width) do menu, terá que aumentar o margin-left do #oi:hover #menu ok? (só que sem tirar o hífen "-").
Agora, cole este código no html.
Cabô, qualquer dúvida me grita, se usar, credite, espero que seja útil c: