1. Primeiro você vai abri o seu css e colocar o seguinte código:

/* —————————– DIV MENU ————————— */

*.menu {display : block;
font-size : 10px;
font-family : tahoma;
letter-spacing : 0;
border-bottom : 1px dotted #000000;
background-repeat : no-repeat;
text-indent : 5px;
vertical-align : middle;
text-decoration : none;
line-height : 14px;
margin-bottom : 1px;
background : url(‘http://suaimagem.com.br’) no-repeat left;
padding-left : 10px;}

*.menu:hover {display : block;
font-size : 10px;
font-family : tahoma;
letter-spacing : 0;
border-bottom : 1px dotted #000000;
background-repeat : no-repeat;
text-indent : 5px;
vertical-align : middle;
text-decoration : none;
line-height : 14px;
margin-bottom : 1px;
background : url(‘http://www.suaimagem.com.br’) no-repeat left;
padding-left : 10px;}
.*espa {padding: 8px; margin:1px; clear: both;}*

2. Agora onde você quer que apareça, coloque este código:

<*div align="left" style="float:left;width:50%"*>
<*div class="menu"><*a href="http://paginaqui.com.br" target=_blank> página aqui <*/a*><*/div*>
<*div class="menu"><*a href="http://paginaqui.com.br" target=_blank> página aqui <*/a*><*/div*>
<*/div*>

<*div align="left" style="float:right;width:50%"*>
<*div class="menu"><*a href="http://paginaqui.com.br" target=_blank> página aqui<*/a*><*/div*>
<*div class="menu"><*a href="http://paginaqui.com.br" target=_blank> página aqui<*/a*><*/div*>
<*/div*>

3. Após colocar esse código, se você quiser colocar outro menu de duas colunas logo abaixo, crie uma div com espaço, para que os menus não se juntem formando uma bagunça. Exemplo:

Após o último “<*/div*>” do código do menu, coloque: <*div class="espa"*><*/div*>

4. Não se esqueça de retirar as tags “*” dos códigos acima.
5. Pronto! Agora é só você personalizar o css e terá um menu de 2 colunas.

Tutorial produzido por Bianca Branco – hellostar.org © – Ajudou? Dê os créditos, quem sabe pode ajudar outra pessoa.