Question

I need to loop though an array of links for a drop down menu.

The dropdown menu is fixed height div. I need the links to fill up the div starting from top left, downwards, then when the column is at max height (set by the surrounding div) it will start a new column from the top downwards as show below.

link one    link four   link seven  
link two    link five   link eight
link three  link six    link nine

I’m trying to use <ul> <li></li> </ul> but I cant get my head around how I’m going to style it up? if I float it left it will align left, if I don’t it won’t float left to start a new column?

Its a LIQUID file so I’m limited. (liquid being the Shopify template file type)

Answer 1

You can accomplish this with CSS3 columns: http://www.quirksmode.org/css/multicolumn.html

Otherwise you would need to wrap your rows in a containing element that is the height of your div and float those.

The only other way I could see doing it is with some JavaScript but you would still probably need to insert some sort of extra markup to accomplish this if you didn’t use CSS3 columns.