Mehrspaltige Liste

Einmal direkt auf eine Liste und einmal auf einen Wrapper-Container gelegt.

HTML

<ol class="direkt">
    <li><a href="#">Däumelieschen</a></li>
    <li><a href="#">Die Störche</a></li>
    <li><a href="#">Der fliegende Koffer</a></li>
    <li><a href="#">Fliedermütterchen</a></li>
    <li><a href="#">Der Tannenbaum</a></li>
    <li><a href="#">Däumelieschen</a></li>
    <li><a href="#">Die Störche</a></li>
    <li><a href="#">Der fliegende Koffer</a></li>
    <li><a href="#">Fliedermütterchen</a></li>
    <li><a href="#">Der Tannenbaum</a></li>
    <li><a href="#">Däumelieschen</a></li>
    <li><a href="#">Die Störche</a></li>
    <li><a href="#">Der fliegende Koffer</a></li>
    <li><a href="#">Fliedermütterchen</a></li>
    <li><a href="#">Der Tannenbaum</a></li>
</ol>

CSS

body {font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;}
ol.direkt {
       -moz-column-count: 2; 
         -moz-column-gap: 30px; 
    -webkit-column-count: 2; 
      -webkit-column-gap: 30px; 
            column-count: 2; 
              column-gap: 30px;
}
div.wrap {
       -moz-column-count: 2; 
         -moz-column-gap: 30px; 
    -webkit-column-count: 2; 
      -webkit-column-gap: 30px; 
            column-count: 2; 
              column-gap: 30px;
}
li {margin:  0 0 15px 0;}
li a {
    padding: 5px 10px;
    background-color: #eee;
    color: #a20000;
    font-size: 0.85em;
    text-decoration: none;
    line-height: 1.5;
       -moz-transition: color 1s ease-out, background-color 1s ease-out, margin-left .5s ease-out; 
         -o-transition: color 1s ease-out, background-color 1s ease-out, margin-left .5s ease-out; 
    -webkit-transition: color 1s ease-out, background-color 1s ease-out, margin-left .5s ease-out; 
            transition: color 1s ease-out, background-color 1s ease-out, margin-left .5s ease-out;
}
li a:hover, .li a:focus {
    color: #000;
    background-color: #f7d484;
    margin-left: 20px;
    }