Is it possible to make this menu with only UL/LI and CSS?

Question

I want to make a menu for my website, and I need only UL and LI for the SEO. It should looks such as :

<ul>
    <li>Link 1</li>
    <li>Link 2</li>
    <li>Link 3</li>
    <li>Link 4</li>
    <li>Link 5</li>
    <li>Link 6</li>
</ul>   

I must have 1 link for each li. Horizontal. It must be dynamic: if I change the text of the Links, it must adjust itself automatically (so in theory no one fixed width should be used on <li> ).

This is (more or less) how the layout should be. More or less because I haven't calculate the real distance between the maximun lenght size for each block of the pair links. Let's say, 20 px left for each block.

As you can see, the distance between the block of links (where there is the 1px border) is different, due to the container (so, the lenght of each pair of links). I can't use different elements inside the ul different of li , this is the main problem.

Any idea if this is possible? I tried many ways, but I really don't know how can I get it (and this is the first menu that I don't know how to make it).

Any input would be nice...

Answer 1

Add this to your CSS.

li { float: left; display: block; }

Here is the jQuery solution : http://jsfiddle.net/ADtke/5/

Answer 2

There is a pure CSS3 way, in supported browsers (shame we have this mess of -webkit, -moz)

ul { 
  border-left:2px solid #cc0;
  border-right:2px solid #cc0;
  -moz-column-count: 3;
  -moz-column-gap: 5px;
  -webkit-column-count: 3;
  -webkit-column-gap: 5px;
  column-count: 3;
  column-gap: 5px;
  -webkit-column-rule-color: #cc0;
  -webkit-column-rule-style: solid;
  -webkit-column-rule-width: 2px;
  -moz-column-rule-color: #cc0;
  -moz-column-rule-style: solid;
  -moz-column-rule-width: 2px;
  column-rule-color: #cc0;
  column-rule-style: solid;
  column-rule-width: 2px;
}
li {
  white-space:nowrap;
}

​ As in this jsfiddle http://jsfiddle.net/hyxxJ/5/