[TUTORIAL] Menu em dropdown

Muita gente, quer um efeito chamado de "Dropdown", esse efeito ocorre logo quando você passa o mouse acima de um nome do menu escolhido de seu fórum. Neste tutorial você aprenderá a fazer esse efeito espetacular. Sem mais demora vamos começar.

--> Tutoriais <--
Menu em dropdown

1º - Conhecendo o código:
Antes de iniciar o nosso tutorial, vamos conhecer os códigos que utilizaremos no decorrer no nosso tutorial.
Codigo Javascript:

jQuery(document).ready(function(){jQuery('.navlinks li a[href=/forum]"]').after('<div class="ulhome"><ul><li class="limenup"><a href="http://ENDEREÇO-DE-SEU-FÓRUM/fx-">NOME-DO-FÓRUM</a><br></li></ul></div>')});

Azul: Caso queira adicionar mais links, copie a parte em azul, logo após a tag </li>.
/forum: Onde o efeito se aplicará

Codigo CSS:

Código:

.ulhome{left:0px;top:20px;position:absolute !important;display:none;z-index:999;text-align:center !important;
background-image: url('IMAGEM-NO-FUNDO-DO-MENU-DROPDOWN') !important;
background-repeat: repeat !important;border:3px solid #ccc;list-style:none;position:relative;z-index:900
-moz-box-shadow:1px 1px 5px #9C9C9C;
-webkit-box-shadow:1px 1px 5px #9C9C9C;
box-shadow:1px 1px 5px #9C9C9C;}
.ulhome ul{text-align:left;border: 1px solid #CCCCCC;padding:0px 19px 0px 3px;}
.ulhome .limenup an{text-decoration:none;display:block;z-index:999;background-image:none !important}
li:hover .ulhome{left:0px;display:block;top:13px !important; -moz-border-radius:0 0 10px 10px;-webkit-border-radius:0 0 10px 10px;
}

2º - Aplicando os códigos:
Para aplicar o código Javascript, faça o seguinte procedimento:
Painel de controle Módulos HTML & JAVASCRIPT Gestão dos códigos Javascript Criar novo javascript

Nome: Adicione qualquer nome, mas adicione um nome que lhe sirva de referencia a este código
Investimento: Adicione em todas as paginas
Código JAVASCRIPT: Adicione o código javascript, do passo anterior

Para aplicar o código CSS, faça o seguinte procedimento
Painel de controle Visualização Imagens e cores Cores Folha de estilo CSS Adicione o código CSS citado no passo anterior

---

© Shiftactif & Dr. Kinki

Agradeçemos a sua leitura deste tutorial, caso tenha alguma duvida, poste um tópico na seção Tire suas duvidas com o seguinte titulo: Menu em dropdown