Menu dropdown (com abas e sub abas)

Não é de hoje que uma das coisas que mais me pedem seja um tutorial sobre como instalar e configurar um menu dropdown, ou como eu acho mais fácil dizer, com abas e sub abas.

Ensinei alguns ao longo do tempo, mas queria um que fosse bem simples de instalar e que não usasse javascript, apenas CSS e HTML.
Então compartilho com você este abaixo, que é um dos que mais uso em meus trabalhos de personalização de blogs.
Clique no botão e veja esse menu instalado em meu blog para testar tutoriais:

Para começar você precisa testar em um blog de testes.
Jamais faça experiências direto em seu blog "oficial".
E mesmo depois de testar, antes de instalar em seu blog real, faça backup dele.
Aprenda aqui:

Como fazer backup completo do blog

Precauções tomadas,é hora de por mãos à obra.

Para começar leia este tutorial até o fim antes de começar.
Depois volte aqui, eu espero.
tic tac
          tic tac

Leu tudo? Entendeu certinho?
Agora vamos fazer!

Instalando o menu com abas

Para começar entre no painel de seu blog, clique na aba Modelo e a seguir clique em Editar HTML.
Dentro da caixa de código tecle Ctrl-F e na barra de busca que abrir digite isso:

 /* Tabs

Dê Enter e assim que localizar selecione tudo que estiver dentro dessa tag, ou seja, de /* Tabs
----------------------------------------------- */ até encontrar /* Headings (no modelo Viagem) ou /* Columns (no modelo Simples).

No lugar do código que selecionou cole o primeiro código: 


Copiar os códigos

Caso seu blog não tenha esse trecho cole o código que forneci acima disso:
]]></b:skin>

Visualize e se não apresentar nenhum erro, salve as alterações. Obviamente você não verá nada ainda.
Acesse a aba Design e clique em Adicionar um gadget.
Escolha a opção HTML/JAVASCRIPT e na janela que abrir cole o segundo código.

Salve as alterações e veja que o menu está prontinho para ser configurado.
Vamos a isso, agora?

Configurando o menu

Onde deixei marcado em capslock no primeiro código são as áreas editáveis do menu. Você pode alterar cores, fontes, tipos de borda, etc.
Leia com atenção, é bem simples e fácil.

Agora aprenda como inserir os links nas abas:
Este menu funciona à base de links, sejam eles internos, externos, de marcadores ou de páginas estáticas.
Vamos supor que você queira colocar em uma das abas as principais categorias de seu blog.
Então você vai ao seu blog, e define quais categorias quer no menu.
Se fosse no meu eu colocaria assim:

<li><a href="#">Categorias do blog</a>
<ul>
<li><a href="http://www.elainegaspareto.com/search/label/Dicas%20para%20blogs">Dicas para blogs </a></li>
<li><a href="http://www.elainegaspareto.com/search/label/Trabalhos%20realizados">Trabalhos realizados</a></li>
<li><a href="http://www.elainegaspareto.com/p/todas-as-cronicas.html">Crônicas</a></li>
<li><a href="http://www.elainegaspareto.com/search/label/receitas%20daqui%20de%20casa">Receitas </a>
</li> <li><a href="http://www.elainegaspareto.com/search/label/Dicas%20da%20Elaine">Dicas da Elaine </a></li>
</ul>
</li>

 Entendeu como preencher as abas?
Caso queira acrescentar mais abas em cada casa basta incluir esse trecho

<li><a href="SEU LINK AQUI">NOME DA CASA 5 </a></li>

antes do fechamento da div, ou seja, antes de
</ul>
</li>
Se quiser menos casas basta apagar as que não quer.
Se quiser mais uma aba simples basta repetir a última aba:

 <li><a href="SEU LINK AQUI">NOME DA CASA 5 </a></li>

Antes do fechamento da div </ul>

Leia com atenção e faça antes em um blog de testes, tá?
Para copiar todos os códigos pare o mouse sobre eles e clique no primeiro ícone que aparecer. Abrirá uma janela com o código livre para ser copiado. 

Conheça a web-série Como personalizar o blog

1. Como criar um blog: criação da conta Google e criação do blog
2. Trocar o plano de fundo do blog e alterar largura e disposição das colunas; 
3. Centralizar o nome do blog, os títulos dos posts e dos elementos de página (gadgets);
4. Alterar cores e fontes dos títulos e do texto (fontes especiais, manuscritas, etc);
5. Criar um menu com abas abaixo do cabeçalho e inserir links nele;
6. Inserir assinatura personalizada;
7. Colocar Voltar ao topo com efeito deslizante;
8. Personalizar os comentários do blog (numerar, separar, incluir opção Responder, etc)
9. Data dos posts em formato calendário
10. Número de comentários dentro de um balão 

Importante!
Leia e releia tudo com calma e atenção, em especial os códigos, para entender o que cada parte faz!