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

Question

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!

Answer 1

<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.

Answer 2

I think that using <span>'s might be the most cross-browser friendly solution.
Unless someone has other ideas? Looking for something cross-browser compatible, as sadly IE doesn't support nth-child(N).
This is not as clean (HTML wise) as I wanted, with these random spans, but here is the HTML:
<nav>
<ul>
<span>
<li>Home</li>
<li>About</li>
<li>Team</li>
</span><span>
<li>Store</li>
<li>Blog</li>
<li>Contact</li>
</span>
</ul>
</nav>
(Notice the span inside the ul — big faux pas in my book.)
And the CSS:
nav span {
width: 50%;
float: left;
}
But that's hardly a good solution... any other ideas?