Últimos Artigos
Inversor de Links Transforme seu computador em um ponto de acesso WIFI Deep web a internet que você não vê Como tirar a segunda via do CPF online Como fazer botões em HTML Como recuperar arquivos de um computador que não inicia Os anônimos dominaram o mundo e agora?

WINDOWS

BESTEIROL

HUMOR

SOFTWARES

VARIEDADES

COMO FAZER UM MENU DROP DOWN



Aprenda como fazer um menu drop down (Para quem não sabe, menu drop down, é aquele que quando você passa o mouse em cima se abre varios sub-menus com efeito de cores etc..) É um menu que além de útil é muito decorativo!

Vou disponibilizar para vocês o código já pronto.
PARTE1:  Faça login no seu blog e click em layout, em seguida editar html e em expandir modelo de widgets. (É recomendado fazer download do seu modelo atual, pro caso de dar algo errado).

Agora localize no html do seu blog a seguinte tag: ]]></b:skin> Agora copie e cole o código abaixo logo acima dela!!
/* Navigations
-----------------------------------------------
*/
#foxmenucontainer {
width:100%;
margin:0 auto;
height : 25px;
padding : 0 0 0 0;
font : 10px Century gothic, verdana, Arial, sans-serif;
font-weight : bold;
text-transform : uppercase;
background : #000;
clear:both;
}
#menu, #menu ul {
margin : 0 5px 0 5px;
padding : 0;
list-style : none;
height : 25px;
}
#menu a {
color : #ddd;
display : block;
font-weight : bold;
padding : 5px 10px 5px 10px;
}
#menu a:hover {
color : #fff;
display : block;
text-decoration : none;
}
#menu li {
float : left;
margin : 0 0 0 0;
padding : 0;
}
#menu li li {
float : left;
margin : 0 0 0 0;
padding : 0;
width : 130px;
}
#menu li li a, #menu li li a:link, #menu li li a:visited {
background : #5d0909;
width : 150px;
float : none;
margin : 0;
padding : 5px 10px 5px 10px;
color : #dfc3c3;
}
#menu li li a:hover, #menu li li a:active {
background : #971515;
width : 150px;
float : none;
margin : 0;
padding : 5px 10px 5px 10px;
color : #d7a1a1;
}
#menu li ul {
position : absolute;
width : 150px;
left : -999em;
z-index : 200;
}
#menu li:hover ul {
left : auto;
display : block;
}
#menu li:hover ul, #menu li.sfhover ul {
left : auto;
}
* Category menu
----------------------------*/
#catmenucontainer {
width:100%;
margin:0 auto;
height : 50px;
padding : 0 0 0 0;
font : 11px Century gothic, verdana, Arial, sans-serif;
font-weight : bold;
text-transform : uppercase;
background : #fefefe url(http://sites.google.com/site/variedadesc/papeis-de-parede/Fechamentodropdown.png?attredirects=0) repeat-x bottom;
clear:both;
    }
#catmenu{
    margin: 0px;
    padding: 0px;
    width:600px;
    background:transparent;
    height:50px;
    float:left;
}
    #catmenu ul {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px;
    list-style: none;
    height:34px;
    }
#catmenu a {
color : #333;
display : block;
font-weight : bold;
padding : 18px 10px;
border-right:1px groove #ddd;
    }
#catmenu a:hover {
color : #fff;
display : block;
text-decoration : none;
background : #333;
padding : 18px 10px;
    }
#catmenu li {
    float: left;
    margin: 0px 0px;
    padding: 0px 0px;
    }
#catmenu li li {
    float: left;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px;
    width: 150px;
    }
#catmenu li li a, #catmenu  li li a:link, #catmenu  li li a:visited {
    background:#DEDCDD ;
    width: 150px;
    float: none;
    margin: 0px 0px;
    padding: 7px 10px 7px 10px;
    color:#555;
    }
#catmenu li li a:hover, #catmenu  li li a:active {
    background:#fff ;
    width: 150px;
    float: none;
    margin: 0px;
    padding: 7px 10px 7px 10px;
    color:#0066CC;
    }
#catmenu li ul {
    position: absolute;
    left: -999em;
    z-index:200;
    background:url(http://sites.google.com/site/variedadesc/papeis-de-parede/menu.png?attredirects=0) bottom ;
    width:170px;
    }
#catmenu li:hover ul {
    left: auto;
    display: block;
    }
#catmenu li:hover ul, #catmenu li.sfhover ul {
    left: auto;
}
PARTE2:  Agora mais para baixo localize:
</b:includable>
</b:widget>
</b:section>
</div>
copie e cole o seguinte código logo abaixo de </div>
<div id='catmenucontainer'>
<div id='catmenu'>
  <ul>
    <li><a href='ENDEREÇO DO LINK' title='TITULO DO LINK AO PARAR O MOUSE EM CIMA'>NOME DO MENU</a>
      <ul class='children'>
    <li><a href='ENDEREÇO DO LINK' title='TITULO DO LINK AO PARAR O MOUSE EM CIMA'>NOME DO LINK</a></li>
    <li><a href='ENDEREÇO DO LINK' title='TITULO DO LINK AO PARAR O MOUSE EM CIMA'>NOME DO LINK</a></li>
    <li><a href='ENDEREÇO DO LINK' title='TITULO DO LINK AO PARAR O MOUSE EM CIMA'>NOME DO LINK</a></li> 
    <li><a href='ENDEREÇO DO LINK' title='TITULO DO LINK AO PARAR O MOUSE EM CIMA'>NOME DO LINK</a></li>
      </ul>
    </li>
    <li><a href='ENDEREÇO DO LINK' title='TITULO DO LINK AO PARAR O MOUSE EM CIMA'>NOME DO MENU</a>
      <ul class='children'>
    <li><a href='ENDEREÇO DO LINK' title='TITULO DO LINK AO PARAR O MOUSE EM CIMA'>NOME DO LINK</a></li>
    <li><a href='ENDEREÇO DO LINK' title='TITULO DO LINK AO PARAR O MOUSE EM CIMA'>NOME DO LINK</a></li>
    <li><a href='ENDEREÇO DO LINK' title='TITULO DO LINK AO PARAR O MOUSE EM CIMA'>NOME DO LINK</a></li> 
    <li><a href='ENDEREÇO DO LINK' title='TITULO DO LINK AO PARAR O MOUSE EM CIMA'>NOME DO LINK</a></li>
       </ul>
    </li>
    <li><a href='ENDEREÇO DO LINK' title='TITULO DO LINK AO PARAR O MOUSE EM CIMA'>NOME DO MENU</a>
      <ul class='children'>
    <li><a href='ENDEREÇO DO LINK' title='TITULO DO LINK AO PARAR O MOUSE EM CIMA'>NOME DO LINK</a></li>
    <li><a href='ENDEREÇO DO LINK' title='TITULO DO LINK AO PARAR O MOUSE EM CIMA'>NOME DO LINK</a></li>
    <li><a href='ENDEREÇO DO LINK' title='TITULO DO LINK AO PARAR O MOUSE EM CIMA'>NOME DO LINK</a></li> 
    <li><a href='ENDEREÇO DO LINK' title='TITULO DO LINK AO PARAR O MOUSE EM CIMA'>NOME DO LINK</a></li>
       </ul>
    </li>        
        <li><a href='ENDEREÇO DO LINK' title='TITULO DO LINK AO PARAR O MOUSE EM CIMA'>NOME DO MENU</a>
      <ul class='children'>
    <li><a href='ENDEREÇO DO LINK' title='TITULO DO LINK AO PARAR O MOUSE EM CIMA'>NOME DO LINK</a></li>
    <li><a href='ENDEREÇO DO LINK' title='TITULO DO LINK AO PARAR O MOUSE EM CIMA'>NOME DO LINK</a></li>
    <li><a href='ENDEREÇO DO LINK' title='TITULO DO LINK AO PARAR O MOUSE EM CIMA'>NOME DO LINK</a></li> 
    <li><a href='ENDEREÇO DO LINK' title='TITULO DO LINK AO PARAR O MOUSE EM CIMA'>NOME DO LINK</a></li>
        </ul>
     </li>
       </ul>
    </li>
  </ul>
</div>
</div>   

Pronto! agora é só editar os links e nome dos menus!!! Depois click em visualizar, se tudo estiver certo salve o modelo e está pronto seu drop down!

Ele vai ficar logo abaixo do cabeçalho. Você pode editar as cores trocando os códigos! Se voce não souber os códigos das cores é só clicar AQUI e ver todos os códigos de cores html!! Em caso de dúvida ou sugestão é só entrar em contato! Nosso email está no rodapé do site!
OBS: NÃO CLICK NOS LINKS! SÃO APENAS O LOCAL ONDE ESTÃO ARMAZENADAS AS IMAGENS DO MENU! COPIE O CÓDIGO INTEIRO INCLUSIVE OS LINKS!!!