title: CSS nested lists into multiple columns
body: <p>I would like to display nested lists in columns, as is frequently used in page footers.</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;
          Header 1 
          &lt;ul&gt;
              &lt;li&gt;Item 1&lt;/li&gt;
              &lt;li&gt;Item 2&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;
          Header 2 
          &lt;ul&gt;
              &lt;li&gt;Item 1.2&lt;/li&gt;
              &lt;li&gt;Item 2.2&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And I'd like the result to look like:</p>
  
  <pre><code>Header 1         Header 2
  Item 1           Item 1.2
  Item 2           Item 2.2
  </code></pre>
  
  <p>I have been playing with <code>display:inline</code> and <code>display:block</code> for a while and cannot get it to show up correctly. </p>