Menu dividido em duas colunas

 Fala aí gente, aqui é o Anon e hoje venho trazer mais um tutorial para vocês! E no tutorial de hoje ensinarei a como fazer um menu dividido em duas colunas de links.

Demonstração
 Primeiramente acesse a página de editar o HTML e busque por:

]]></b:skin>

 Agora acima desta linha cole o seguinte código:

/* Menu duas colunas
----------------------------------------------- */
.esquerdo{
  margin:0 0 0 0;/*-posicionamento do primeiro menu-*/
  font-family:Arial;/*-fonte-*/
  color:#333;/*-cor-*/
  font-size:13px;/*-tamanho da fonte-*/
  opacity:0.5;/*-nível de transparência-*/
  display:block;
 }
.esquerdo a{
  font-family:Arial;/*-fonte-*/
  color:#333;/*-cor-*/
  font-size:13px;/*-tamanho da fonte-*/
  opacity:0.5;/*-nível de transparência-*/
  display:block;
 }
.esquerdo a:hover{
  font-family:Arial;/*-fonte-*/
  color:#000;/*-cor ao passar o mouse-*/
  font-size:13px;/*-tamanho da fonte-*/
  opacity:1;/*-nível de transparência ao passar o mouse-*/
  display:block;
  cursor:pointer;
  text-decoration:none !important;
  font-weight:normal !important;
 }
.direito{
  margin:-XXpx 0 0 XXpx;/*-posicionamento do segundo menu-*/
  font-family:Arial;/*-fonte-*/
  color:#333;/*-cor ao passar o mouse-*/
  font-size:13px;/*-tamanho da fonte-*/
  opacity:0.5;/*-nível de transparência ao passar o mouse-*/
  display:block;
 }
.direito a{
  font-family:Arial;/*-fonte-*/
  color:#333;/*-cor ao passar o mouse-*/
  font-size:13px;/*-tamanho da fonte-*/
  opacity:0.5;/*-nível de transparência ao passar o mouse-*/
  display:block;
 }
.direito a:hover{
  font-family:Arial;/*-fonte-*/
  color:#000;/*-cor ao passar o mouse-*/
  font-size:13px;/*-tamanho da fonte-*/
  opacity:1;/*-nível de transparência ao passar o mouse-*/
  display:block;
  cursor:pointer;
  text-decoration:none !important;
  font-weight:normal !important;
 }

 Agora é só fazer as alterações da sua maneira seguindo as instruções logo à frente de cada propriedade.

Nota

 Eu já deixei o margin do menu direito "parcialmente" preparado, isso indica que precisará mover com margin apenas o menu direito

 Código para se usar o menu:

<div class='esquerdo'>
<a href='LINK'>Botão</a>
<a href='LINK'>Botão</a>
<a href='LINK'>Botão</a>
<a href='LINK'>Botão</a>
<a href='LINK'>Botão</a>
</div>
<div class='direito'>
<a href='LINK'>Botão</a> 
<a href='LINK'>Botão</a> 
<a href='LINK'>Botão</a> 
<a href='LINK'>Botão</a> 
<a href='LINK'>Botão</a>
</div>

 Se quiseres inserir um pequeno "ícone" ao lado de cada opção, o código de cada link deve ficar assim:

<a href='LINK'><span style='color:#códigodacor;'>»</span>BOTÃO</a>

Links úteis

Propriedade margin | Menu vertical com transition

 É isso aí, comentem ;D