Menu nav, com efeito hover

Do blog Vagabundia peguei este menu e repasso para quem tiver interesse...

REVISADO EM DEZEMBRO DE 2010

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.

Copie o código abaixo e no HTML de seu blog, antes de
]]></b:skin>
cole o código abaixo:

.navi1 {
  display: block;
  height: 64px;
  margin:0 auto;
  position: relative;
  width: 525px;
}
.navi1 ul {
  float: none;
  list-style-image: none;
  list-style-type: none;
  margin: 3px 0;
}
.navi1 ul li {
  height: 64px;
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1-Xt3oUwmOD5PiTPkXVhG-RKDWwyLTOi5ZXKhT7Zdod7dkICNJFND_5ljxCkNZN_eR7DS6eBS4_zIr3GDoiSFw-XGYGjwpe8M6pHPcId67RiHVQblaU8QdaTo4ZX85xx52EViOs4afi0/s0/tab-1.png);
  background-repeat: no-repeat;
  float: left;
  margin: 0px;
  padding-top: 5px;
  position: absolute;
}
.navi1 ul li a {
  display: block;
  height: 100%;
  width: 100%;
}
.navi1 ul li.sm1 { background-position: 0px 0px; left: 0px; width: 125px; }
.navi1 ul li.sm2 { background-position: -125px 0px; left: 100px; width: 124px; }
.navi1 ul li.sm3 { background-position: -249px 0px; left: 200px; width: 124px; }
.navi1 ul li.sm4 { background-position: -373px 0px; left: 300px; width: 125px; }
.navi1 ul li.sm5 { background-position: -498px 0px; left: 400px; width: 126px; }
.navi1 ul li:hover { z-index: 1000; }
.navi1 ul li.sm1:hover { background-position: 0px -75px; }
.navi1 ul li.sm2:hover { background-position: -125px -75px; }
.navi1 ul li.sm3:hover { background-position: -249px -75px; }
.navi1 ul li.sm4:hover { background-position: -373px -75px; }
.navi1 ul li.sm5:hover { background-position: -498px -75px; }

Agora este próximo código cole em um widget, especificamente no HTML/Javascript

<div class='navi1'>
  <ul>
    <li class='sm1'><a href='ENDEREÇO HOME'/></li>
    <li class='sm2'><a href='ENDEREÇO ABOUT'/></li>
    <li class='sm3'><a href='ENDEEÇO BLOG'/></li>
    <li class='sm4'><a href='ENDEREÇO WORKS'/></li>
    <li class='sm5'><a href='ENDEREÇO CONTACT'/></li>
  </ul>
</div>