putting li in the next column after specific heigh

Question

I am working on navigation menus in a wordpress website. Please have a look at background image always align to top for css and html.

This post was successful but now I want to push the list-items (li) of ul to new column after it reaches to a particular height. Explaining further, I am having a fix height background image for sub menus.When the sub menu reaches to a height of background they should be pushed to next column.

In this way the sub menus will be within the background image always.

Thanks

Answer 1

This can be done using css property column-count like,

 column-count:2;

property on li or div and some height,

Following link will explain you more

How to make floating DIV list appear in columns, not rows

Answer 2

I think the easiest way is to set inline-block to your li elements.

Aslong as your width/height is defined as not 100%, it should work.

Answer 3

you could try it in css adding a specific count. Bassically you tell there are like a certain ammount of items and if its surpassed that ammount it will push it to the next colum

ul {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
}​

I must warn you though, that it's not universally supported and challenged browsers will just ignore it. You have to come up with something else for that.

Another way is probably set a certain height in your overal div, as for example like this:

ul
{
    height: 100px;
    border: 1px solid #f00;
}

li
{
     float: left;
     border: 1px solid #0f0;
     width: 50px;
}

Further, i think its just messing with css a bit and try to figure out what is the most handiest method for you.