Tutorial - Menu em cortininha (Menu Tracks)

Ois ois ois! \0/
Lembram-se deste menu no Animes Espectaculares?

Foi quando a Camii-chan fez este excelente design pro meu bloguinho, qui fofi :3
Obigada mais uma vez Camii-chan >-<

Pois é... o tuto estava no Kawaii World, porém esse blog meio que está confuso e sem os tutoriais antigos, então decidi postar o tutorial para as pessoas que quiserem este tutorial não morrerem de desespero logo que não encontrem o tuto... (Eu quase morri para o encontrar, mas por sorte tinha o HTML do design com este menu e encontrei o código hohoho~)

Vamos lá então...
Vá a design, Modelo, HTML e aperte CTRL F e procure por </header>
E depois desse código cole:

<div style='top: 0px; height: 30px; width: 100%; z-index: 4; background: #7cabf6 position: fixed; left: 0px; text-align: center; '>
<div style='position: absolute; top: -15px; width: 900px; text-align: center !important; float: center !important; '>  <ul id='nav'>
  <li><a href='LINK 1'>NOME 1</a></li>
  <li><a href='LINK 2'>NOME 2</a></li>
  <li><a href='LINK 3'>NOME 3</a></li>
  <li><a href='LINK4'>NOME 4</a></li>
  <li><a href='LINK 5'>NOME 5</a></li>
  <li><a href='LINK 6'>NOME 6</a></li>
  <li><a href='LINK 7'>NOME 7</a></li>
</ul></div> </div>

Depois procure por </head>
E depois desse código coloque:

<style type='text/css'>
ul#nav { width: 1500px; margin: 0 auto; text-align: center !important; overflow: hidden;}
ul#nav li {float: left; list-style: none; align: center;}
ul#nav li a{display: block; width: 110px; height: 90px; padding: 20px 0 0 0; margin-right: 30px; margin-left: 5px; font: bold 17px &#39;Audiowide&#39;; text-transform: uppercase; color: #fff !important; text-shadow: 0 1px 3px #636161; text-decoration: none; background: url(LINK DA IMAGEM DA FAIXINHA) 0 -149px no-repeat; -webkit-transition: all 0.7s ease-out; -moz-transition: all 0.9s ease-out;
}
ul#nav li a:hover { background: url(URL DA IMAGEM) 0 0 no-repeat;color: #E4D9EE; text-shadow: 0 2px 3px #4c2225; -webkit-transition: all 0.7s ease-out; -moz-transition: all 0.7s ease-out;}
ul#nav li a.js:hover {background: url(URL DA IMAGEM) 0 -149px no-repeat; -webkit-transition: all 0.9s ease-out; -moz-transition: all 0.9s ease-out;}
</style>

Pronto, onde diz "LINK DA IMAGEM DA FAIXINHA" substituam, simples, nao?
Pré-visualizem e vejam se está tudo bem ;)
Agora algumas faixinhas que eu fiz e que podem usar:

    

Já sabem, se usarem creditem ;)

Kissu, Bunny~