Question

Here’s the thing I’m trying to do:

I have a horizontal menu created with an unordered list, in which the list elements are displayed as inline-block. The list has a fixed width.

ul { width: 980px; }
li { display: inline-block; }

When the total width of the list elements exceeds the lists width, the line breaks and a new line is created. What I would like to do is to control the position of this new line so that after it’s created it is OVER the first line and not under. Maybe this will be clearer:

3rd line: item7 item8
2nd line: item4 item5 item6
1st line: item1 item2 item3

I have a hunch that this can’t be done with CSS alone, so a combined CSS+jQuery solution would do.

Any help would be much appreciated.

Answer 1

A css solution: DEMO

This solution uses transform: scaleY(-1) on both the UL and the LIs. First, the entire UL is flipped, then each LI is flipped again. A double inverse.

CSS

ul, ul li {
    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1);
}
ul {
    width: 300px;
}
 li {
    display: inline-block;
    width: 95px;
    zoom: 1;          /* Trigger hasLayout in ie7 */
    *display: inline; /* Trigger hasLayout in ie7 */
}

HTML

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
    <li>item7</li>
    <li>item8</li>
</ul>