smallcompany - 8:29 pm on May 22, 2012 (gmt 0)
I have a list I use for CSS menu.
<li><a href="#" target="_self" >Item 1</a></li>
<li><a href="#" target="_self" >Item 2</a></li>
<li><a href="#" target="_self" >Item 3</a></li>
<li><a href="#" target="_self" >Item 4</a></li>
The CSS directs this so it shows in two columns based on the fact that there's enough space for two items be listed horizontally, and the third one simply falls down to the next row. The result is this:
Item 1 | Item 2
Item 3 | Item 4
What I want is this:
Item 1 | Item 3
Item 2 | Item 4
Right now, I have to arrange items in an awkward way in unordered list so they show up the way I want, listed vertically. As soon as I add or remove an item, all falls apart and I have to rearrange again.
I wonder if there are CSS ways to force list go vertically instead of horizontally.
In regards of the code, all it does is it says that the submenu li ul is of 500px width, and the item li li is set to block display with width of 160px.
As I change those widths, items list in one, two, three or more columns, however they fit a single row.