Splitting lists with CSS3

The goal is to split a list into columns. Seems simple, and there are a couple ways to do it, however:

• float breaks your list's order by displaying it horizontally,
• CSS3 columns property is not supported in IE, while Firefox and webkit browsers require their prefixes,
• and of course you can use JS plugins.

But there is a pure CSS3 solution, example shows 3 columns, each one contains at most 3 elements:

ul li {
    line-height: 20px;
}
ul li:nth-of-type(3n+4) {
    margin-top: -60px;
  }
ul li:nth-of-type(n+4) {
    margin-left: 120px;
}
ul li:nth-of-type(n+7) {
    margin-left: 240px;
}

Code breakdown:

ul li {
    line-height: 20px;
}

Setting li height.

ul li:nth-of-type(3n+4) {
   margin-top: -60px; 
 }

Move every 3rd li up, starting with 4th, set margin to 3 times li height.

ul li:nth-of-type(n+4) {
    margin-left: 120px;
}
ul li:nth-of-type(n+7) {
    margin-left: 240px;
}

Move the second and third column to prevent overlapping.

Here's a fiddle

Works on IE9, Opera, Chrome, Safari and Firefox.