Menú horizontal Grey Impression con CSS Para el Blog

Hoy día les traigo este bonito menú horizonta Grey Impression que lo he creado utilizando la herramienta cssmenumaker, lo puedes utilizar en tu blog, tiene un estilo muy profesional con un efecto muy bonito. Lo he probado en varios navegadores y funciona perfectamente, incluyendo los navegadores más conocidos como Firefox, IE, Opera, etcétera.

Si quieres verlo funcionando, puedes echarle un vistazo en mi blog de pruebas de menús.

Para ponerlo en tu blog ve a Diseño > Edición del HTML y antes de ]]></b:skin> pegamos el estilo CSS siguiente:

[+/-] Ver / Ocultar Código

/* Menú Horizontal
----------------------------------------------- */
.bg {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgunUMsOQQlFSfzUtJ9G5gkeqtJJxFHYRCoZjJ3K4-x-TQJPLDoj79AitMKKgp63nJaocOOIjD_xai9jphq3i0whAvUK8IXL9qwOM1anrqvYPee75QXBq8uUlUPMhw1ey1LGdCQWkdAspCJ/s320/button4.gif);
}
.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglontxwPTzE6_4dLrMNWo32l12IfjLrJNz9jFBx_ZvVA5kJO3-lRmonZBvy0xPGTPTLGQPoghtuBut34wTTfsRmFue2aHDr2Pr20GC22TTIm26nAwtiK87wGEUQID9pEyzgvKpbe_fI4fD/s320/button1a.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif;
}
.menu li.top {display:block; float:left; position:relative;
}
.menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;
}
.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;
}
.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVaOYvHTrooM1YnE0xLkO7NtiiHM_mKz6pvvCn3eBWQyUKnXWRiQUB6ROb9sD9DCYcXRK4_p2AI41MW4sBzOOXI5V-kevWH0PSp03dGjRXx8Av4H-PZ7v6eq8fCEb3KJUpHqzUUZoZTWbq/s320/down.gif) no-repeat right top;
}
.menu li a.top_link:hover {color:#000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgunUMsOQQlFSfzUtJ9G5gkeqtJJxFHYRCoZjJ3K4-x-TQJPLDoj79AitMKKgp63nJaocOOIjD_xai9jphq3i0whAvUK8IXL9qwOM1anrqvYPee75QXBq8uUlUPMhw1ey1LGdCQWkdAspCJ/s320/button4.gif) no-repeat;
}
.menu li a.top_link:hover span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgunUMsOQQlFSfzUtJ9G5gkeqtJJxFHYRCoZjJ3K4-x-TQJPLDoj79AitMKKgp63nJaocOOIjD_xai9jphq3i0whAvUK8IXL9qwOM1anrqvYPee75QXBq8uUlUPMhw1ey1LGdCQWkdAspCJ/s320/button4.gif) no-repeat right top;
}
.menu li a.top_link:hover span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE2Wp5MRhKSn6m9Z8gdGio9KaJ6NkGnrjHuhQ3AkkL4_s78dFAvv5esqgziI0PDfsTMpmdcq4grkVJVPMoiDOZcMWAnHPyJu3OTmWciP-2SxeZ2RJLU2NYgzFG1a01M-Ol-EIO-wv3yqr5/s320/button4a.gif) no-repeat right top;
}
.menu li:hover > a.top_link {color:#000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgunUMsOQQlFSfzUtJ9G5gkeqtJJxFHYRCoZjJ3K4-x-TQJPLDoj79AitMKKgp63nJaocOOIjD_xai9jphq3i0whAvUK8IXL9qwOM1anrqvYPee75QXBq8uUlUPMhw1ey1LGdCQWkdAspCJ/s320/button4.gif) no-repeat;
}
.menu li:hover > a.top_link span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgunUMsOQQlFSfzUtJ9G5gkeqtJJxFHYRCoZjJ3K4-x-TQJPLDoj79AitMKKgp63nJaocOOIjD_xai9jphq3i0whAvUK8IXL9qwOM1anrqvYPee75QXBq8uUlUPMhw1ey1LGdCQWkdAspCJ/s320/button4.gif) no-repeat right top;
}
.menu li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgunUMsOQQlFSfzUtJ9G5gkeqtJJxFHYRCoZjJ3K4-x-TQJPLDoj79AitMKKgp63nJaocOOIjD_xai9jphq3i0whAvUK8IXL9qwOM1anrqvYPee75QXBq8uUlUPMhw1ey1LGdCQWkdAspCJ/s320/button4.gif) no-repeat right top;
}
.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;
}
.menu a:hover {visibility:visible;
}
.menu li:hover {position:relative; z-index:200;
}
.menu ul,
.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;
}
.menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #999999; white-space:nowrap; width:200px; height:auto;
}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;
}
.menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;
}
.menu :hover ul.sub li a.fly {background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsiOdFRdH0TvpbFZ1Ohv26tE4VqN2zr1WnEwxP_yHj_bdf12tBQmx8446iThYDqOD05iVIbgQEAVbhh8t2Z2KGjmzlMfXP-nA9J0qjs0et2Bx9KbbPl2rzUa_Nof1PH1PGFjOOe89tlsJV/s320/arrow.gif) 80px 7px no-repeat;
}
.menu :hover ul.sub li a:hover {background:#999999; color:#fff;}
.menu :hover ul.sub li a.fly:hover {background:#999999 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;
}
.menu :hover ul li:hover > a.fly {background:#999999 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnaMfruea0sWTQvgkkT2eEFWnxF9mm7mtHVEegr-GpOEvi7nr3UzNXSe46JAuNzPAAatUPTxyXI0dQA0dB5DQo4SyeRlZ4-Kgrb6wR95n5hXeYx89oZCOj4IaYCawquiTk4ks5XYWz8LaF/s320/arrow_over.gif) 80px 7px no-repeat; color:#fff;
}
.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 999999; white-space:nowrap; width:93px; z-index:200; height:auto;
}

Luego en un Elemento HTML pega el siguiente código:

<style media="all" type="text/css">Menu "/menu/menu_style.css";</style>
<div>
<ul class="menu">
<li class="top"><a href="URL del enlace" target="_self" class="top_link"><span>Ejemplo1</span></a>
</li>
<li class="top"><a href="URL del enlace" target="_self" class="top_link"><span>Ejemplo2</span></a>
</li>
<li class="top"><a href="URL del enlace" target="_self" class="top_link"><span>Ejemplo3</span></a>
</li>
<li class="top"><a href="URL del enlace" target="_self" class="top_link"><span>Ejemplo4</span></a>
</li>
</ul>
</div>

Ahora, arrástralo debajo de la cabecera. Lo que está en rojo cámbialo por la URL de tu enlace, y donde dice Ejemplo 1 cámbialo por el nombre del enlace.