Menu horizontal v2

Agora venho trazer uma outra versão de menu horizontal foi baseado aqui no menu do Best-Tuga .
Eu gostei do resultado ficou bonito ,este menu irá ajustar se ao comprimento de sua header.
Aqui pode ver acima  na imagem embora se veja muito mal ,mas veja aqui online;  Entre aqui...
Depois de vêr vamos aplicar o menu no blog .

Antes de tudo faça uma cópia do seu template...

Agora entre no seu painél e depois em modelo e click em editar html e procure este código:

E acima dele coloque meu código :

/* Inicio Menu http://best-tuga.blogspot.pt*/
#bt-horizontal,
#bt-horizontal ul,
#bt-horizontal li #bt-horizontal a {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 14px;
  font-family: Bobber;
  line-height: 1;
}
#bt-horizontal {
  width: auto;
}
#bt-horizontal ul {
  zoom: 1;
  background: #798bba  top left repeat;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border: 1px solid #4e6398;
  -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
}
#bt-horizontal ul:before {
  content: '';
  display: block;
}
#bt-horizontal ul:after {
  content: '';
  display: table;
  clear: both;
}
#bt-horizontal a,
#bt-horizontal a:link,
#bt-horizontal a:visited {
  padding: 15px 20px;
  display: block;
  text-decoration: none;
  color: #ffffff;
  text-shadow: 0 -1px 1px #344266;
  border-right: 1px solid #4e6398;
}
#bt-horizontal a:hover {
  color: #344266;
  text-shadow: 0 1px 1px #9ba8cb;
}
#bt-horizontal li {
  float: left;
  border-right: 1px solid #8a9ac3;
}
#bt-horizontal li:hover {
  background: #687cb1  top left repeat;
}
#bt-horizontal li:first-child {
  border-left: none;
  -webkit-border-radius: 4px 0 0 4px;
  -moz-border-radius: 4px 0 0 4px;
  border-radius: 4px 0 0 4px;
}

Agora vamos colocar html procure este código:

Coloque meu código do blockquote acima do código destacado a vermelho da imagem:

<div id='bt-horizontal'>
<ul>
   <li><a href='index.html'><span>INICIO</span></a></li>
   <li><a href='#'><span>UTIL</span></a></li>
   <li><a href='#'><span>LAZER</span></a></li>
   <li><a href='#'><span>AJUDA</span></a></li>
   <li><a href='#'><span>CONTACTO</span></a></li>
   <li class='last'><a href='#'><span>INDICE</span></a></li>
</ul>
</div>

E foi esta a partilha que vos trouxe ,duvidas disponha até amanha ,boas noites...

Menu horizontal v2

► 0

► menus

► Cartita