Menu horizontal v1

Uma boa noite, está chegando ao fim o domingo,mas fazer o quê ...
Bem eu vim trazer aqui um menu horizontal como imagem acima mostra ,embora não dá para ver grande coisa eu sei por isso pode ver online:   Veja aqui...
Este menu irá ficar com a tamanho de sua header se a sua header estiver 1000px o menu ficará também com 1000px.
Para colocar o menu no blog ,entre em modelo depois em editar html e procure este código:

Agora acima dele coloque meu código do blockquote abaixo...

/* ---menuhorizontal    http://best-tuga.blogspot.pt/---*/
#bt-horizontalmenu ul,
#bt-horizontalmenu li,
#bt-horizontalmenu a {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1;
  font-family: 'Bobber', Bobber;
}
#bt-horizontalmenu {
  border: 0px solid #eb00e3;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  width: auto;
}
#bt-horizontalmenu ul {
  zoom: 1;
  background: #00ffbc;
  background: -moz-linear-gradient(top, #00ffbc 0%, #00ffbc 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #00ffbc), color-stop(100%, #00ffbc));
  background: -webkit-linear-gradient(top, #00ffbc 0%, #858080 100%);
  background: -o-linear-gradient(top, #ff85fb 0%, #ff52f9 100%);
  background: -ms-linear-gradient(top, #ff85fb 0%, #ff52f9 100%);
  background: linear-gradient(top, #ff85fb 0%, #ff52f9 100%);
  padding: 5px 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
#bt-horizontalmenu ul:before {
  content: '';
  display: block;
}
#bt-horizontalmenu ul:after {
  content: '';
  display: table;
  clear: both;
}
#bt-horizontalmenu li {
  float: left;
  margin: 0 5px 0 0;
  border: 1px solid transparent;
}
#bt-horizontalmenu li a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  padding: 8px 15px 9px 15px;
  display: block;
  text-decoration: none;
  color: #ffffff;
  border: 1px solid transparent;
  font-size: 16px;
}
#bt-horizontalmenu li.active {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #ff85fb;
}
#bt-horizontalmenu li.active a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  display: block;
  background: #878181;
  border: 1px solid #eb00e3;
  -moz-box-shadow: inset 0 5px 10px #878181;
  -webkit-box-shadow: inset 0 5px 10px #878181;
  box-shadow: inset 0 5px 10px #878181;
}
#bt-horizontalmenu li:hover {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #878181;
}
#bt-horizontalmenu li:hover a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  display: block;
  background: #b1a1c6;
  border: 1px solid #eb00e3;
  -moz-box-shadow: inset 0 5px 10px #b1a1c6;
  -webkit-box-shadow: inset 0 5px 10px #b1a1c6;
  box-shadow: inset 0 5px 10px #b1a1c6;
}

Agora vamos ao html procure este código:

Está destacado em vermelho e acima dele cole meu código do blockquote:

<div id='bt-horizontalmenu'>
<ul>
   <li class='active'><a href='index.html'><span>item1</span></a></li>
   <li><a href='#'><span>item2</span></a></li>
   <li><a href='#'><span>item3</span></a></li>
   <li class='last'><a href='#'><span>item4</span></a></li>
</ul>
</div>

Veja como ficou ,este foi mais uma das minhas partilhas espero ter ajudado ,duvidas deixe recado até mais...

Menu horizontal v1

► 0

► menus

► Cartita