Tutorial - Menu sublinhado

Olá pessoal!

Como tinha dito, hoje vou mostrar a vocês um dos menus, para mim é até o mais fácil de usar porque é só criar as páginas que aparecerá.

Para quem não acompanhou os passo 2 e 1, clique AQUI.

Clique na imagem para visualizar melhor.

O modelo é o menu sublinhado.

O primeiro passo é clicar em MODELO, depois em EDITAR HTML e na caixinha apertar ctrl+f e pesquisar o código que está destacado abaixo:
/* Tabs
----------------------------------------------- */
.tabs-inner {

padding: 0;
}
.tabs-inner .section {
margin: 0;
}
.tabs-inner .widget ul {
padding: 0;
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll top center;
}
.tabs-inner .widget li {
border: none;
}
.tabs-inner .widget li a {
display: inline-block;
padding: 1em 1.5em;
color: $(tabs.text.color);
font: $(tabs.font);
}
.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
position: relative;
z-index: 1;
background: $(tabs.selected.background.color) $(tabs.selected.background.gradient) repeat scroll top center;
color: $(tabs.selected.text.color);
}

Você vai substituir todo este código acima pelo que está abaixo:

/* Menu sublinhado /*
----------------------------------------------- */
.tabs-inner {
margin: 1em 0 0;
padding: 0;
margin-top: -5px; /*para subir aumente e para descer abaixe o número*/
margin-left: 0px;
background: #000; /*Cor do fundo do menu*/
}
.tabs-inner .section {
margin: 0;
}
.tabs-inner .widget ul {
padding: 0;
background: transparent none repeat scroll top center;
}
.tabs-inner .widget li {
border: none;
list-style-type:none;
}
.tabs-inner .widget li a {
display: inline-block;
font-size: 21px; /*Tamanho da fonte do menu*/
font-family: 'Arial'; /*Fonte do menu*/
font-weight: lighter;
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
text-transform: uppercase;
padding: 1em 1.5em;
line-height: 10px;
padding: 12px;
color: #fff; /*cor da fonte do menu*/
margin-left: 7px; /*espaço entre os botões do menu*/
}
.tabs-inner .widget li.selected a{
font-weight: lighter;
}
.tabs-inner .widget li a:hover {
line-height: 10px;
border-bottom: 1px solid #fff; /*Cor do sublinhado o que fica abaixo da palavra*/
}

Pronto, modificado o menu de seu blog e ainda pode escolher que cor vai querer e tudo.

Beijos e até a próxima!

OBS: Favor não copiar, dê sempre os créditos, este blog está sobre licença e você pode ser acusado de plágio.