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

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.