Simple 2-column navigation with CSS and a single list?

css, html, html-lists, multiple-columns, navigation

Solution

<ul>
  <li>Home</li>
  <li>About</li>
  <li>Team</li>    
  <li>Store</li>
  <li>Blog</li>
  <li>Contact</li>
</ul>

CSS:

li {
  width: 50%;
  float: left;
  padding: 5px 0; 
}

They will order like that:

Home About
Team Store
Blog Contact

If that's not a problem, you have a very simple solution.

EDIT:

li:nth-child(even) {
  width: 50%;
  float: right; 
}
li:nth-child(odd) {
  width: 50%;
  float: left;
}

This will order them in the correct way. not sure how IE will act, but will work in all other browsers.

or you can follow strictly the `UL-LI` concept, so your html will look like this an you can have as many column as you need:

<nav>
    <ul class="menuitem">
       <li class="column">
          <ul>               
            <li>Home</li>
            <li>About</li>
            <li>Team</li>
          </ul>
        </li>
        <li class="column">
          <ul>               
             <li>Store</li>
             <li>Blog</li>
             <li>Contact</li>
          </ul>
        </li>               
    </ul>

    <ul class="menuitem">
        <li class="column">
          .....
        </li>
    </ul>      

</nav>

Making a correct and well formated html can make your life easier.

Problem

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

Original source