Copie e insira este script abaixo da tag </header> dentro do código HTML do seu blog. Para isso, entre dentro painel editor HTML do blogger que está dentro da guia TEMA.
Evite copiar e colar o código direto em seu blog. Minha sugestão é que você copie o código abaixo e cole em um bloco de notas. Depois recorte do bloco de notas para o seu blogspot. Assim você evita erros.
Abaixo está o Script para você copiar:
---------------------------------------------
<style type="text/css">
*, *:after, *:before{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
font-size: 14px;
line-height: 1.5;
}
.menu{
background: #000;
}
.menu .menu-list, .menu .sub-menu{
list-style: none;
}
.menu a{
color: #fff;
text-decoration: none;
display: block;
cursor: pointer;
text-transform: uppercase;
font-size: 12px;
font-weight: 700;
letter-spacing:0.2em;
}
.menu > .menu-list > li{
float: left;
position: relative;
}
.menu > .menu-list > li > a {
padding: 20px;
margin: 0 5px;
background: #000;
}
.menu > .menu-list > li:hover a {
background: #444;
}
.menu > .menu-list > li:hover > .sub-menu {
display: block;
}
.menu > .menu-list > li > .sub-menu {
position: absolute;
top: 50px;
left: 5px;
background: blue;
min-width: 200px;
z-index: 1000;
display: none;
}
.menu > .menu-list > li > .sub-menu > li > a {
padding: 10px 20px;
}
.menu:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.site-content{
padding: 20px;
}
h1{
font-size: 22px;
margin: 0 0 0.6em 0;
letter-spacing:0.2em;
color: #444;
}
p{
margin: 0 0 1.6em 0;
}
</style>
<div class="menu">
<ul class="menu-list">
<li><a href="#">Home</a></li>
<li>
<a href="#">Menu1</a>
<ul class="sub-menu">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</li>
<li>
<a href="#">Menu2</a>
<ul class="sub-menu">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
<li><a href="#">Menu5</a></li>
</ul>
</div>
---------------------------------------------
Conteúdo complementar
