Criar Uma Lista Personalizada Usando CSS - Versão #2

Nesta postagem compartilho com vocês este outro modelo de lista com apenas CSS. Essa, como você pode ver na imagem ao lado, contém duas colunas e não contém numeração como a que já havia mostrado em postagens anteriores.

Para colocar em seu blog...

Entre em "Layout" - "Adicionar um Gadget" - "HTML/JavaScript" e cole o seguinte código

<style>
  /* Código by DicasHot */
.MenuDicasHotBlogger ul{width:300px;float:right;display:block;}.MenuDicasHotBlogger li{margin: 0;text-align: right;list-style:none;width:48%;float:right;padding:0 2px 0 3px;}.MenuDicasHotBlogger li a{position:relative;display:block;padding:.4em .4em .4em .4em;margin:.1em 0 .1em 2.5em;background:#F1F1F1;border:1px solid #DDD;border-radius:3px;color:#444;text-decoration:none;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;-ms-transition:all .3s ease-out;transition:all .3s ease-out;font:12px tahoma,arial;text-shadow:1px 1px rgba(255, 255, 255, 0.48);}.MenuDicasHotBlogger li a:before{content:'#';position:absolute;left:-2.5em;top:50%;margin-top:-1em;background:#39C4FF;height:2em;width:2em;line-height:2em;text-align:center;font-weight:bold;}.MenuDicasHotBlogger li a:after{position:absolute;content:'';border:.5em solid rgba(0, 0, 0, 0);left:-1em;top:50%;margin-top:-.5em;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;-ms-transition:all .3s ease-out;transition:all .3s ease-out;font:12px tahoma,arial;text-shadow:1px 1px rgba(255, 255, 255, 0.53);}.MenuDicasHotBlogger li a:hover:after{left:-.5em;border-left-color:#39C4FF;}
</style>
<div class='MenuDicasHotBlogger'>
  <ul>
<li>
<a dir="rtl" href="http://dicashot.blogspot.com/">DicasHot</a>
</li>
<li>
<a dir="rtl" href="http://dicashot.blogspot.com/">DicasHot</a>
</li>
<li>
<a dir="rtl" href="http://dicashot.blogspot.com/">DicasHot</a>
</li>
<li>
<a dir="rtl" href="http://dicashot.blogspot.com/">DicasHot</a>
</li>
 <li>
<a dir="rtl" href="http://dicashot.blogspot.com/">DicasHot</a>
</li>
 <li>
<a dir="rtl" href="http://dicashot.blogspot.com/">DicasHot</a>
</li>
 <li>
<a dir="rtl" href="http://dicashot.blogspot.com/">DicasHot</a>
</li>
 <li>
<a dir="rtl" href="http://dicashot.blogspot.com/">DicasHot</a>
</li>
</ul>
</div>

O # destacado de rosa no código, corresponde ao simbolo que vai aparecer na lista.