title: Simple 2-column navigation with CSS and a single list?
body: <p>I am looking to make a two-column navigation bar by using a single <code>&lt;ul&gt;</code> with six <code>&lt;li&gt;</code> items:</p>
  
  <pre><code>&lt;nav&gt;
      &lt;ul&gt;
      &lt;li&gt;Home&lt;/li&gt;
      &lt;li&gt;About&lt;/li&gt;
      &lt;li&gt;Team&lt;/li&gt;    
      &lt;li&gt;Store&lt;/li&gt;
      &lt;li&gt;Blog&lt;/li&gt;
      &lt;li&gt;Contact&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;​
  </code></pre>
  
  <p>Three elements on one side, and three on the other; ordered vertically.</p>
  
  <p>Right now, it's easy to do when making two seperate <code>&lt;ul&gt;</code> elements and putting padding/margins between them: <a href="http://jsfiddle.net/Baumr/SJcjN/" rel="nofollow">http://jsfiddle.net/Baumr/SJcjN/</a> — but that's not a great solution. </p>
  
  <p>Could also wrap <code>&lt;span&gt;</code> tags around each set of three <code>&lt;li&gt;</code>'s — but is that the only CSS solution?</p>
  
  <p>Looking for some elegant ideas. Thank you!</p>