[Tutorial] Sub-links nos itens do menu

Informações:

Autor: Desconhecido
Versões: Todas as versões
Introdução: Sub-links nos itens do menu

Instalação:

Acesse:

Painel de controle -> Modulos -> HTML & Javascripts -> Gestão dos códigos Javascripts

Então crie um novo javascript com investimento em todas as paginas com esse código:

Código:

jQuery(document).ready(function(){
    jQuery("#prof-content").appendTo("li:has(a[href$='profile?mode=editprofile'])");
    });

Explicação:

O javascript pode ser editado para o endereço que você deseja. Contudo, tenha atenção para não colocar nos links incorretos.
No lugar de profile?mode=editprofile coloque o endereço do link do menu que você deseja que os sub-links apareçam.

Adicionando o CSS para uma melhor aparência

Acesse:

Painel de Controle ->> Visualização ->> Imagens e Cores ->> Cores ->> Folha de estilo CSS

E Adicione esse código css á sua Folha de Estilo:

Código:

ul.linklist li {
    position: relative;
    }
    
    li:hover #prof-content {
    opacity: 1;
    visibility: visible;
    margin-top: -5px;
    }
    
    #prof-content {
    margin-top: 5px;
      margin-left: 1450%;
    _margin: 0; /*IE6 only*/
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 29px;
    z-index: 999;
    background-color: #fff;
    padding: 5px;
    -moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
    -webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
    box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    }
    
    #prof-content a {
    display:block;
    width: 150px;
    text-align: left !important;
    margin-left: 5px;
    }

• Resultado: