Menu com descrição em caixa

Atenção, este scroller não aparecerá ( essa barra aqui em cima com as setas)

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.

Para ter um menu como este é simples. Clique em Layout, depois em "Editar HTML". Procure pelo código :

]]></b:skin>


E cole acima dele o código abaixo.





Passe o mouse












* ATENÇÃO, onde está na cor vermelha é para que se quiser você modifique aí as cores do seu menu.

.ul {
list-style-type: none;
margin:0;
padding:0;
position: absolute;
top: 2em;
left: 3em;
width: 100%;
}
li {
float: left;
}
.menu a {
width: 100px;
height: 20px;
float: left;
display: block;
text-align: center;
border: 1px solid #fff;
text-decoration: none;
color: #000;
background: #CCCCCC;
}
.menu a:hover {
color: #411;
background: #808080;
border: 1px solid gray;
border-bottom: 0px;
color: #fff;
}
.menu a span {
display: none;
}
.menu a:hover span {
display: block;
position: absolute;
margin-left: 20px;
top: 30px;
left: 0;
width: 600px;
text-align: left;
border: 1px solid BLACK;
background: #cccccc;
color: #000;
}

Agora vá até elementos de página, clique em "ADICIONAR ELEMENTO DE PÀGINA" e clique, depois clique em "HTML/Javascript" e cole o segundo código fazendo as modificações necessárias. Salve e arraste o módulo para onde quiser que fique o menu.

<ul class="menu">
<li><a href="">LINK 1<span>ESCREVA AQUI O QUE QUISER SOBRE O SEU LINK 1</span></a></li>
<li><a href="">LINK 2<span>ESCREVA AQUI O QUE QUISER SOBRE O SEU LINK 2</span></a></li>
<li><a href="">LINK 3<span>ESCREVA AQUI O QUE QUISER SOBRE O SEU LINK 3</span></a></li>
<li><a href="">LINK 4<span>ESCREVA AQUI O QUE QUISER SOBRE O SEU LINK 4</span></a></li>
<li><a href="">LINK 5<span>ESCREVA AQUI O QUE QUISER SOBRE O SEU LINK 5</span></a></li>
<li><a href="">LINK 6<span>ESCREVA AQUI O QUE QUISER SOBRE O SEU LINK 6</span></a></li>
</ul>