Pular para o conteúdo principal

Menu Horizontal com Drop Down (CSS)

Viu o menu que está embaixo do cabeçalho? Nesse tutorial você irá aprender a fazer um igual a ele.

Para começar, vá em Layout > Editar HTML, e faça um backup do seu template clicando em baixar modelo completo.
Depois procure pelo código ]]></b:skin> , e cole o código a seguir antes dela:

/* Menu Horizontal Com Drop Down by Jean Nunes */
div#container
{ width:752px; position:relative; left:50%; margin:0 -380px; background:#ffffff; height:30px; }
h1
{ width:752px; margin:1px; color:#4C1B1B; font:helvetica; font-size:24pt; overflow:hidden; padding:80px 0 0; vertical-align:middle; text-align:right; }
p { margin:0; padding:1.2em; }
p a:link,
p a:visited,
p a:hover,
p a:active
{ font-weight:bold; color:#94CE4E; }
ul#navigation-1
{ margin:0; padding:1px 0; list-style:none; width:100%; height:21px; border-top:1px solid #94CE4E; border-bottom:1px solid #94CE4E; font:normal 8pt verdana, arial, helvetica;}
ul#navigation-1 li
{ margin:0; padding:0; display:block; float:left; position:relative; width:148px; }
ul#navigation-1 li a:link,
ul#navigation-1 li a:visited
{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#94CE4E; color:#ffffff; width:148px; height:13px; }
ul#navigation-1 li:hover a,
ul#navigation-1 li a:hover,
ul#navigation-1 li a:active
{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#C0E190; color:#ffffff; width:146px; height:13px; border-left:1px solid #ffffff; border-right:1px solid #ffffff; }
ul#navigation-1 li ul.navigation-2
{ margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:146px; position:absolute; top:21px; left:-1px; border:1px solid #94CE4E; border-top:none; }
ul#navigation-1 li:hover ul.navigation-2
{ display:block; }
ul#navigation-1 li ul.navigation-2 li
{ width:146px; clear:left; width:146px; }
ul#navigation-1 li ul.navigation-2 li a:link,
ul#navigation-1 li ul.navigation-2 li a:visited
{ clear:left; background:#94CE4E; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }
ul#navigation-1 li ul.navigation-2 li:hover a,
ul#navigation-1 li ul.navigation-2 li a:active,
ul#navigation-1 li ul.navigation-2 li a:hover
{ clear:left; background:#C0E190; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3
{ display:none; margin:0; padding:0; list-style:none; position:absolute; left:145px; top:-2px; padding:1px 1px 0 1px; border:1px solid #94CE4E; border-left:1px solid #94CE4E; background:#ffffff; z-index:900; }
ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3
{ display:block; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited
{ background:#94CE4E; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active
{ background:#C0E190; }
ul#navigation-1 li ul.navigation-2 li a span
{ position:absolute; top:0; left:132px; font-size:12pt; color:#fe676f; }
ul#navigation-1 li ul.navigation-2 li:hover a span,
ul#navigation-1 li ul.navigation-2 li a:hover span
{ position:absolute; top:0; left:132px; font-size:12pt; color:#ffffff; }

As partes em vermelho representam os códigos das cores (mais cores você encontra AQUI), e a parte em azul, é o tamanho do menu( os dois valores devem ser iguais).
Agora, procure por:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'/>
</div>

E embaixo de </div> , cole esse código:

<div id='container'><ul id='navigation-1'>
<li><a href='http://guiab.blogspot.com/' title='Home'>Home</a></li>
<li><a href='#' title='Feeds'>Feeds</a>
<ul class='navigation-2'>
<li><a href='http://feeds.feedburner.com/guiablogger/' target='_blank'>Feeds</a></li>
<li><a href='http://www.feedburner.com/fb/a/emailverifySubmit?feedId=2359978/' target='_blank'>Feeds (Email)</a></li>
<li><a href='http://dicasblogger.blogspot.com/feeds/comments/default' target='_blank'>Comentários</a></li>
</ul>
</li>
<li><a href='#' title='Acessórios'>Acessórios</a>
<ul class='navigation-2'>
<li><a href='http://guiab.blogspot.com/search/label/Widget' title='Widgets'>Widgets</a></li>
<li><a href='#' title='Templates'>Templates</a>
<ul class='navigation-3'>
<li><a href='http://guiab.blogspot.com/search/label/Black' title='Black'>Black</a></li>
<li><a href='http://guiab.blogspot.com/search/label/Minima' title='Minima'>Mínima <span/></a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href='#' title='Contato'>Help</a>
<ul class='navigation-2'>
<li><a href='jean_r_n_m@hotmail.com' title='Adm'>Administrador</a></li>
<li><a href='guiab@live.com' title='Equipe GB'>Equipe GB</a></li>
<li><a href='http://guiab.blogspot.com/2008/09/contato.html' title='Contato'>Contato</a></li>
</ul>
</li>
<li><a href='#' title='Busca'>Busca</a>
<ul class='navigation-2'>
<form action='/search' id='searchthis' method='get' style='display:inline;'><input id='search-box' name='q' type='text'/><input id='search-btn' type='submit' value='Buscar'/></form>
</ul>
</li>
</ul>
</div>

Altere os links do jeito que você quiser. Qualquer dúvida, deixe um comentário.

Update dia 01/10/08:
No IE6 não funciona!!!

Update dia 13/11/08:
Eu mudei o tema do blog, o menu não ficou legal com o novo tema então eu resolvi tirar!

Postagens mais visitadas deste blog

Mudar Imagem ao Passar o Mouse

A interatividade é o que muitas vezes (quando combinada com bom conteúdo) faz com que os leitores gostem e voltem a visitar o seu site. Nesse tutorial você aprende um código em JavaScript que altera a imagem quando o cursor do mouse passa sobre ela.

E-Referer - De onde vem seus visitantes?

O site E-Referer oferece uma ferramenta gratuita que mostra a origem dos visitantes do seu blog e a quantidade de visitas que lhe enviou.