MENU HORIZONTAL SIMPLES

Hey gente, aqui é a Paula!
Bem, como prometi hoje vou ensinar a fazer um menu igual esse aqui do blog. Peguei esse tutorial no Trechy Teen, no caso vocês irão usar o banner como fundo do menu, é bem fácil e você pode optar pela cor e tudo mais:
Procure por: /* Navigation Menu caso tenha usado o tutorial anterior e por: 
.Header .description {
font-size: 130%;
}
se for seu layout comum, agora apague todo esse código:

/* Navigation Menu
------------------------------------------------------*/
#NavbarMenu {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGAmDZ1Zizrk5c0QB5ZMcTwkDif_22RNaQ4YBXF1uu13DaiorLS0ipsOzjUWHrwswj588Ij9JYyBHkdg9tne-rD9Om2Lyo9FiJz8DMJWfE7kiMHNBnnsE1Ql4uxgPuaq1SYaoFUgJazCuj/s0/navhappyday.png) no-repeat;
width: 890px;
height: 58px;
font-size: 14px;
color: #FFF;
font-weight: bold;
margin: 0 auto 10px;
padding:0px;
}

#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;
display: block;
font-weight: bold;
text-transform: uppercase;
margin: 0;
padding: 12px 15px 7px;
}
#nav li a:hover, #nav li a:active {
margin: 0;
padding: 12px 15px 6px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #C5EAf7;
width: 150px;
color: #FFF;
font-weight: normal;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
}
#nav li li a:hover, #nav li li a:active {
background: #e87e93;
color: #FFF;
padding: 7px 10px;
}
#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;

}

Substitua por esse:
/* Pagelist
-----------------------------------------------*/
#PageList1 {
float:left;
font:14px arial;
margin-top:10px;
margin-left:200px;
width:700px;
color:#FF8C00;
}
.PageList li a {
color:#ffffff;
font-weight:bold;
padding:10px 10px;
text-shadow:0 1px 0 ;
}
.PageList li a:hover{
color:#8B5C8E;
font-weight:bold;
text-shadow:0 1px 0 ;
text-decoration:none;
}
.crosscol .PageList li, .footer .PageList li {
background:none repeat scroll 0 0 transparent;
float:left;
list-style:none outside none;
margin:0;
padding:10px 0;
}
.PageList li.selected a {
color:#C71585;
font-weight:bold;
text-decoration:none;
}
.PageList li.selected a:hover {
color:#FFF8DC;
font-weight:bold;
text-decoration:none;
}
margin-top:10px; - para o menu subir ou descer
margin-left:200px; - para direita e para esquerda 

53 comentários

  1. mynameisglenn12/09/2013, 11:24

    que legal!! Adoreii! :D <3

    beijos beijos

    ResponderExcluir
  2. Nathalia Iury12/09/2013, 11:25

    Valeu a dica, adorei. :D

    http://nahboaoi.blogspot.com.br/

    ResponderExcluir
  3. Isabely Rodrigues12/09/2013, 11:55

    Eu nuca consigo fazer esse menu rs
    Gatinha estou atualizando o meu canal no youtube com vídeos semanais, visite e se gostar se inscreva, beijinhos.
    Canal: https://www.youtube.com/user/isabelyrogrigues
    Blog: http://fasesdegarota.blogspot.com.br/

    ResponderExcluir
  4. Giulia Vibosi12/09/2013, 12:40

    Eu vi seu blog agora e me encantei, serio, OLHA O SEU DESIGN *-* é perfeito e olha o seu conteúdo, gente, perfeito!

    gamei no seu blog e muito boa a dica.
    http://pensamentosdecoelho.blogspot.com.br/

    ResponderExcluir
  5. Newsdayoff12/09/2013, 14:25

    Muito bom o tutorial, anotei tudo e vou tentar fazer!

    http://newsdayoff.blogspot.com.br/

    ResponderExcluir
  6. Marcela Miranda12/09/2013, 15:01

    Acho lindo mesmo seu menu. <33
    Beijos, beijos!

    DearItGirl.blogspot.com.br

    ResponderExcluir
  7. BySchmith Pamela12/09/2013, 17:04

    Para mim que não consigo nunca me dar bem com isso... ahah
    Mas a dica é boa!
    Beijo querida
    http://byschmith.blogspot.pt/2013/09/voltando-atras-no-tempo.html

    ResponderExcluir
  8. Gaaby12/09/2013, 17:39

    Nunca me dou bem com HTML , mais ok UHSAUHSUAHSAUHS'

    Beijos , Deus abençoe <3'
    mundodasgarotasforever.blogspot.com.br

    ResponderExcluir
  9. Mihh12/09/2013, 18:19

    adorei, sempre quiz fazer. obg. bjs

    ResponderExcluir
  10. Lilian Michelle12/09/2013, 19:24

    Que legal, vou guardar p/ quem sabe futuramente eu pense em fazer no meu blog!
    Beijão, beauty-habits.blogspot.com.br

    ResponderExcluir
  11. Garotas Urbanas13/09/2013, 03:29

    Que legal!!
    beijinhos, Rê
    http://garotas-urbanas.com/

    ResponderExcluir
  12. Camila Faria13/09/2013, 06:37

    Uma maravilha esse tutorial, especialmente para pessoas como eu, que não sabem NADA de html!

    ResponderExcluir
  13. Marcele S. Santo13/09/2013, 07:37

    Ótima dica Paula! É sempre útil saber dessas coisas! :D
    Beijocas
    Tô barata, mas tô na moda | Facebook

    ResponderExcluir
  14. Bruna13/09/2013, 08:17

    Adoooro esse menu, muito cute!!
    super beijo e já seguindo

    Mania de Bruna
    @ManiaDeBruna

    ResponderExcluir
  15. ingrid13/09/2013, 08:38

    vou ver se isso tb funciona no wordpress! sempre leio os tutoriais e qnd vou ver eh pra blogger! ahahahha

    ResponderExcluir
  16. Giulia Pessoz13/09/2013, 12:02

    Ah, que bom que vocÊ postou porque eu passei mesês procurando um tutorial que realmente funcionasse!!
    Beijos
    Batom De Framboesa
    Fique com Deus!

    ResponderExcluir
  17. Simples e Agradável Blog (Pamela Paz)13/09/2013, 12:06

    Estava precisando de um tutorial assim, quero colocar um menun no meu blog.

    http://simpleseagradavel.blogspot.com.br/

    ResponderExcluir
  18. Clara Vieira13/09/2013, 12:12

    Mue jesus, isso tudo para mim e grego :/ Beijos, Clara do www.nemsanta.com

    ResponderExcluir
  19. Thami13/09/2013, 13:30

    Eu adorei o tutorial! Vou mandar pra minha prima, pois ela está começando o blog agora.

    xx,
    www.likeparadise.com.br

    ResponderExcluir
  20. Frann13/09/2013, 14:31

    Hummm,muito interessante,belo tuto!
    Beijos

    http://commands-of-my-life.blogspot.com.br/
    http://books-ofmylife.blogspot.com.br/

    ResponderExcluir
  21. princessandfashion13/09/2013, 19:21

    ótimo tutorial, flor!

    Esse menu é muito fofo!
    beijos


    http://princessandfashion.wordpress.com

    ResponderExcluir
  22. Iasmin Cruz14/09/2013, 06:31

    Adorei o tutorial :D
    Depois vou tentar.

    www.iasmincruz.com

    ResponderExcluir
  23. Yara Fontes14/09/2013, 10:43

    acho dificil eu fazer essas coisas porque nao levo jeito .. mais adorei e vou tentar . Beijos http://derepente15uiinze.blogspot.com.br/

    ResponderExcluir
  24. Cih14/09/2013, 15:20

    Ah muito bom, mas nunca consegui fazer esse menu, no proximo layout vou tentar!
    Bjs

    ResponderExcluir
  25. Isabele Farias14/09/2013, 16:31

    Adorei, muito, muito, muito útil! Você arrasa ^^

    isabelefarias.blogspot.com.br

    ResponderExcluir
  26. Renata Venturoso14/09/2013, 21:30

    Adoro posts assim.. eu não entendo nada dessas coisas!!
    Já tem post novinho esperando por você!! Muitos beijinhos..

    ➥ www.rolamuito.com

    ResponderExcluir
  27. Natalia Pacheco14/09/2013, 22:18

    Adorei o tutorial, o menu é lindo. Já tinha procurado algo relacionado para por no meu layout, mas não tinha achado nada que me agradasse. Beijos, Light As The Breeze

    ResponderExcluir
  28. Nanna Cunha15/09/2013, 07:26

    Que bacana, ótima dica Flor!
    Boa semana!
    Fica com Deus!
    Beijo!

    http://nannacunha.blogspot.com.br

    ResponderExcluir
  29. Lola Mantovani15/09/2013, 09:15

    Sou doida por esse menu, vou começar a fazer um layout novo e vou coloca-lo
    beijos

    ResponderExcluir
  30. Cristiiane15/09/2013, 12:21

    Quanto tempo sem comentar aqui em Paula *-*
    Estava precisando deste tutorial ,acho que vou usar no meu próximo layout .Bjs

    blog-sempre-teen.blogspot.com

    ResponderExcluir
  31. Monique Pires15/09/2013, 13:30

    Adorei o tutorial!
    Seu blog é uma graçaaa

    To sorteando uma paleta de 168 cores de sombra la no blog, vem?
    Beijinhos,

    BLOG

    FANPAGE

    ResponderExcluir
  32. Karla Santiago15/09/2013, 14:37

    Eu acho muito lindo e já tentei colocar no blog,mas nunca dá certo :c

    Beijos.
    Senhorita Imperfeita

    ResponderExcluir
  33. Marilia Maia16/09/2013, 07:19

    To querend0 colocar um menu no meu blogger, pq nao consigo com o lay atual!! tem como vc me ajudar? Não to conseguindo nem com esse :s

    Bjs
    www.mamaequeroserfashion.com

    ResponderExcluir
  34. Jéssica Coelho16/09/2013, 09:18

    Muito boa a dica!!

    Beijos Jéssica R. Coelho BLOG

    Sorteio de uma Paleta Mineral

    Sorteio p/ quem é de Curitiba

    ResponderExcluir
  35. cristiane de paula goiatá goiatá16/09/2013, 09:52

    Oi Paula!!!!
    O que é esse sue blog?????? AMEI GATA!!!
    Você desenha muito bem e olha que eu amo desenhar, também faço ilustrações!!!
    Que luxo!!!! Estou impressionada como uma garota da sua idade tem tantas habilidades!!A palavra que define o que senti é "encantada"!!
    Belo trabalho, belo blog!!!
    Depois dá uma passadinha no meu blog, estou precisando colocar algo bacana no meu banner, o que me sugere?
    Estou seguindo e curti a fanpage, retribui???
    Beijinhos e boa semana linda!
    http://criscriacoisas.blogspot.cpm.br
    http://wwww.facebook.com/criscriacoisas

    ResponderExcluir
  36. Simples e Agradável Blog (Pamela Paz)16/09/2013, 10:41

    Gosto muito desses tutorias que ajudam com layout do blog, para iniciantes isso ajuda demais.

    http://simpleseagradavel.blogspot.com.br/

    ResponderExcluir
  37. Garotas Comuns16/09/2013, 20:47

    Ótima dica,mas acho que eu fiquei meio perdida KKKKKKK
    ainda bem que é minha prima que faz os layouts haha

    Garotas Comuns

    ResponderExcluir
  38. Andressa Coutinho ♥17/09/2013, 09:38

    Aah eu amo esse tutorial. Acho ele uma gracinha. Já usei ele algumas vezes, e acho que ele é tudo. Simplesmente isso. AMEI Paula! E o seu layout continua sendo divo! Hahaha

    Kisses ♥

    - Navy Cupcake

    ResponderExcluir
  39. Micaely Rodrigues17/09/2013, 10:01

    Flor Paula Adorei o Tuto
    *----* Amo seu Blog ! bem útil!
    Beijinho :*
    O Melhor de Mim

    ResponderExcluir
  40. Lili17/09/2013, 12:15

    Eu amo o seu menu!!
    Beijocas, Lili ;3
    Clique aqui, e vá para o blog / Princesa Teen!
    Ask / Fan Page / Twitter - Redes Sociais do blog.

    ResponderExcluir
  41. Giovana17/09/2013, 13:34

    Adorei a dica,vou tentar no meu próximo layout,que já passou da hora de mudar.

    Beijos

    blogdagi1.blogspot.com.br

    ResponderExcluir
  42. Deborah almeida17/09/2013, 14:24

    ola paula linda como vai eu adorei o tutorial e a dica , mais eu fico morendo de medo de mexer no meu blog da ultima vez que tentei perdi tudo aff fiz algo erado rsrsrs bjs de http://pramulherlindatododia.blogspot.com.br/

    ResponderExcluir
  43. Segredos de Meninas17/09/2013, 14:29

    Tutorial perfeito, Amo seu blog.
    Beijos,
    primeiroseusonho.blogspot.com

    ResponderExcluir
  44. Joana Darc18/09/2013, 18:49

    Boa dica, adoro seus tutoriais.

    http://vivendocomodeve.blogspot.com.br/

    ResponderExcluir
  45. Suzana19/09/2013, 13:43

    ótimo tutorial! :)

    http://www.adolecentro.com/

    ResponderExcluir
  46. Paula Barros.20/09/2013, 06:12

    Adorei o tuto,é ótimo para quem não entende muito de códigos css e html :)
    Beijos!

    http://www.blogdapaulinka.com/

    ResponderExcluir
  47. Hannah Ferreira II20/09/2013, 13:21

    Adorei a dica e o menu. *-*

    http://beggar-fashion.blogspot.com.br/

    ResponderExcluir
  48. Bruna Correa22/09/2013, 06:46

    Bacana! :)

    http://bruh-correa.blogspot.com.br/

    ResponderExcluir
  49. Ruby22/09/2013, 09:12

    O menu é lindo e obrigada por compartilhar " a receita".

    ResponderExcluir
  50. Sarah Marques22/09/2013, 10:06

    Oi, tudo bom?
    Amei! São coisas simples como essa que mais
    ajudam a todos na hora de melhorar os blogs! Parabéns!
    Obrigada por prestigiar minha coluna no blog Refúgio das Palavras!
    Tem post novo e promoção!
    Beijão
    Endless Poem

    ResponderExcluir
  51. Marina Alessandra22/09/2013, 15:34

    Eu adorei seu blog, as dicas e tudo mais. Estou seguindo e vou estar sempre por aqui. Ah, e em relação ao post, achei meio complicado de fazer, mas vou tentar. Quero mudar um pouco e o layout daqui é lindo *-*
    Beijos

    marinaalessandra.blogspot.com
    @mariinaale

    ResponderExcluir
  52. .Samara Lima23/09/2013, 15:14

    Parece ser legal, amei linda *--*

    Ainda lembra de mim, passei muito tempo sem postar no blog, mais tô de volta.

    BLOG: http://tudodiferentecomsamaralima.blogspot.com.br/
    Instagram: instagram.com/samaralima_03

    Beijos ♥

    ResponderExcluir
  53. Debbie -23/09/2013, 16:13

    Adorei o tutorial Paula *-* amo aqui, pq tá lotado de tutoriais e coisinhas super úteis pra fazer um layout bacana, haha

    beijos :*
    guitarrebel.blogspot.pt

    ResponderExcluir