Menu horizontal simples b-t

Olá ,um bom dia ,vim postar aqui um menu horizontal ele é bem simples,mas sempre dá jeito para quem procura este tipo de menu.
Como mostra a imagem acima é assim fica.
Mas pode visualizar online:  Entre aqui...
Vamos lá aplicár o menu ao blog...

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

Vamos em modelo no seu blog e depois editar html e procure este código:

E acima dele coloque meu código:

/* menu-horizontal -  http://best-tuga.blogspot.pt/
------------------------------------------------------------ */
#bt-menutuga{
width:100%;
height:64px;
background:url(http://i.imgur.com/XO8H5Ck.jpg) repeat;
}
#boxmenutuga{
padding:22px 0 0 54px;
}
#boxmenutuga ul{
margin: 0;
padding: 0;
list-style-type: none;
z-index:1000;
}
#boxmenutuga ul li{
position: relative;
display: inline;
float: left;
z-index:1000;
color:#b5f8c0;
padding:0 0 0 43px;
font-size:15px;
font-family:  bobber;
}
#boxmenutuga ul li.first{
padding:0;
background:none;
}
#boxmenutuga ul li a{
display:block;
color:#b5f8c0;
z-index:1000;
}
* html #boxmenutuga ul li a{
display: inline-block;
float:left;
}
* html #boxmenutuga ul li ul li a{
float:none;
}
#boxmenutuga ul li a:link, #boxmenucattuga ul li a:visited{
text-decoration:none;
}
#boxmenutuga ul li a:hover, #boxmenutuga .current_page_item a, #boxmenu .select a{
text-decoration:none;
color:#f8b5ea;
}
#boxmenutuga ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
margin:0 0 0 43px;
}
#boxmenutuga ul li ul li{
display: list-item;
float: none;
font-size:1.0em;
background:none;
padding:0 5px 0 5px;
background:#000000;
}
#boxmenutuga ul li ul li ul{
top: 0;
margin:0;
}
#boxmenutuga ul li ul li a, #boxmenutuga ul li.current_page_item ul a, #boxmenutuga ul li.select ul a{
width: 160px;
height:auto;
padding: 5px;
margin: 0;
border-bottom: 1px solid #000;
background:#000000;
border-top-width: 0;
text-align:left;
text-decoration:none;
color:#f8b5ea;
}
#boxmenutuga ul li ul li a:hover{
text-decoration:none;
}

Agora procure este código:

E acima dele coloque o meu código:

<div id='bt-menutuga'>
<div id='boxmenutuga'>
<ul>
<li class='first current_page_item'><a href='/'>INICIO</a></li>
<li class='page_item page-item'><a href='s url aqui' title='s titulo'>REGRAS</a></li>
<li class='page_item page-item'><a href='s url aqui' title='s titulo'>ARTIGOS</a></li>
<li class='page_item page-item'><a href='s url aqui' title='s titulo'>NOVIDADES</a></li>
<li class='page_item page-item'><a href='s url aqui' title='s titulo'>AJUDA</a></li>
<li class='page_item page-item'><a href='s url aqui' title='s titulo'>INDICE</a></li>
</ul>
</div>
</div>

Salve e veja o resultado.

Agora procure estes códigos e altere sua maneira...

width:100%; largura do menu...
s url aqui- coloque o link da sua página ,post,etc...
s titulo- coloque nome titulo menu...
REGRAS-coloque nome seu menu...
ARTIGOS-coloque nome seu menu...
NOVIDADES-coloque nome seu menu...
AJUDA-coloque nome seu menu...
INDICE-coloque nome seu menu...

Feito foi esta a partilha que trouxe ,duvidas disponha ,até mais...

Menu horizontal simples b-t

► 0

► menus

► Cartita