Para que tengas una opcion original para poner los enlaces en tu blog o web, aqui te traigo otro menu diseñado con CSS e imagenes. Le he puesto este nombre, porque en ingles 'balloon' quiere decir globo. Como veras, al pasar el cursor sobre los enlaces, aparece un globo tipo comic de color negro que le da un aspecto original y visualmente diferente. Para ponerlo en tu pagina, tan solo tienes que copiar el codigo de abajo y pegarlo en un gadget HTML, sustituyendo lo que esta en color rojo.
CODIGO:
<div class="menuballoon"><ul><li><a href="ENLACE"><span>TEXTO</span></a></li><li><a href="ENLACE"><span>TEXTO</span></a></li>
<li><a href="ENLACE"><span>TEXTO</span></a></li><li><a href="ENLACE"><span>TEXTO</span></a></li><li><a href="ENLACE"><span>TEXTO</span></a></li></ul></div>
<style>
.menuballoon {
float: left;
height: 46px;
padding-left: 20px;
padding-top: 4px;
}
.menuballoon ul {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
}
.menuballoon li {
display: inline;
margin: 0;
padding: 0;
}
.menuballoon a {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKAkjk-0CQ2gEjVaoqGCwWQPlNsVPxBe9_78kaNd2DfpSkDko_uLN036zCnu6opSHyOZyhhlkr7Zj7nJ6QKeRuusrPja9l0NWntiufSYiY4_oxySS1cpIDZehbzpxb_yeYlB97UKPfTmw/s102/lefttab.jpg") no-repeat scroll left top transparent;
color: #262626;
float: left;
font-family: arial;
font-size: 12px;
line-height: normal;
margin: 0;
padding-left: 17px;
text-decoration: none;
}
.menuballoon a span {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY0Nmv3FSUDc-1a9lWQVaF4vmlVjTImHnC38QSUsfovXJ5TUBnuDVHfuByFOffZToj0Cvtn0Y_k_QnR3E0loyEU9j5cSCijWEVErR-27QsBuKlNSNjr7278VMaawBo0-TgZNRMIpwvVRQ/s300/righttab.jpg") no-repeat scroll right top transparent;
color: #262626;
display: block;
float: left;
font-weight: bold;
padding: 11px 18px 25px 0;
}
.menuballoon a span {
float: none;
}
.menuballoon a:hover span {
color: #FFFFFF;
}
.menuballoon li.selected a {
background-position: 0 -51px;
}
.menuballoon li.selected a span {
background-position: 100% -51px;
color: #FFFFFF;
}
.menuballoon a:hover, .glowingtabs li.selected a:hover {
background-position: 0 -51px;
}
.menuballoon a:hover span, .glowingtabs li.selected a:hover span {
background-position: 100% -51px;
}
</style>
