Criar e Colocar um Menu com SubMenu com CSS no Blog

Aprenda a criar e colocar um menu com submenu no blog usando cdigos

HTML e CSS. Inserir um submenu no blog pode ajudar a organizar seu
contedo deixando mais fcil as pessoas encontrarem o que procuram.
Alm disso, esse tipo de menu ajuda voc as postagens que acha as mais
importantes do seu site.
Como voc notar esse um cdigo grande, mas basicamente ele se divide
em duas partes: estilos CSS (aparncia do menu) e os links que voc quer
colocar no menu e sub menu do blog. Ento vamos falar sobre esses
assuntos separadamente.

Criar e Colocar um Menu com Sub-Menu no Blog

O jeito que colocar esse cdigo que vamos mostrar muito simples apenas
entre na pagina layout > adicionar gadget > html/javascript e cole o cdigo
completo.

<style type="text/css">
#NavbarMenu {
background: #555;
color: #FFF;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
width: 100%;height: 35px;
font-weight: bold;margin: 0;padding: 0;
}
#NavbarMenuleft {
width: 100%;float: left;margin: 0;padding: 0;
}
#nav {
margin: 0;
padding: 0;
}

#nav ul {
float: left;list-style: none;margin: 0;padding: 0;
}
#nav li {
list-style: none;margin: 0;padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #FFF; /*--edite cor do link--*/
display: block;
font-size: 16px;
font-family: Georgia, Times New Roman;font-weight: normal;text-transform:
capitalize;
margin: 0;padding: 9px 15px 8px;border-right: 1px solid #fff;
}
#nav li a:hover, #nav li a:active {
color: #FFF; /*--edite cor do link hover--*/
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
background-color: #9F0;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
width: 150px;
color: #FFF; /*--cor do link--*/
font-size: 14px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform:capitalize;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px
solid #FFF;
border-right: 1px solid #FFF;
background-color: #555;
}
#nav li li a:hover, #nav li li a:active {
color: #FFF; /*--cor do link--*/
padding: 7px 10px;
background-color: #FC6;
}
#nav li {float: left;padding: 0;
}
#nav li ul {z-index: 9999;position: absolute;left: -999em;height: auto;width:
170px;margin:
0;padding: 0;
}
#nav li ul a {width: 140px;
}

#nav li ul ul {margin: -32px 0 0 171px;}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav
li.sfhover ul ul ul {
left: -999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul,
#nav li li.sfhover
ul, #nav li li li.sfhover ul {left: auto;}
#nav li:hover, #nav li.sfhover {position: static;}
</style>
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a href='endereo do blog'>Home</a></li>
<li>
<a href='url da pagina'>LINK</a>
<ul>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
</ul>
</li>
<li><a href='url da pagina'>LINK1</a>
<ul>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
</ul>
</li>
<li><a href='url da pagina'>LINK2</a>
<ul>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
</ul>
</li>
<li><a href='url da pagina'>LINK3</a>
<ul>
<li><a href='url da pagina'>Nome do Link </a></li>
<li><a href='url da pagina'>Nome do Link</a></li>
<li><a href='url da pagina'>Nome do Link</a></li>
<li><a href='url da pagina'>Nome do Link</a></li>
<li><a href='url da pagina'>Nome do Link</a></li>
</ul>
</li>

</ul>
</div>
</div>
<div style='clear:both;'/></div>

Embora seja simples de colocar existem muitas coisas que voc precisa
personalizar no submenu antes de colocar no seu blog ento veja os
detalhes abaixo.

Alterar Aparncia do Menu do Blog

Ser necessrio entender um pouco de CSS para edit-lo, mas depois que
comear ver que mais fcil do que parece. Os estilos CSS servem para
formatar texto e no caso de criar um menu podemos fazer os botes usando
CSS.
Basicamente voc deve procurar por background para alterar a cor de
fundo do boto do menu e color para mudar a cor do texto do boto. Veja
onde esto as configuraes mais importantes do sub menu. Veja nos links
abaixo algumas dicas teis sobre como alterar essas cores:
Gerador de Cdigo HTML das Cores
O que CSS? Para que Serve e Como usar o CSS
Logo no comeo do cdigo temos o estilo da barra de menu completa.
#NavbarMenu {
background: #555;
color: #FFF;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
width: 100%;height: 35px;
font-weight: bold;margin: 0;padding: 0;
}
Ento como falamos altere background: #555; (cor de fundo) e color: #FFF;
(cor das letras). Claro que voc pode mudar outras coisas como o tipo e
tamanho das letras. Alm disso, quando mais voc souber sobre CSS poder
fazer outros testes para personalizar seu menu.