Making an unordered list behave like the one on Apple's website

Question

Go to http://store.apple.com/us/buy-mac/mac-pro?product=MD878LL/A&step=config, load up a bunch of items and look at the expanded list of addons on the side bar. That list is an unordered list with a bunch of li elements. To create the second column of add ons they make those li's have a margin-left big enough to move them over then assign a margin-top:-170 on the first element of the row to make it go to the top. Two distinct things happen that I can not replicate.

• The margin-left does not seem to matter when the negative margin-top is assigned, the first column of li's don't change position and the second row doesn't consider them in the way
• All the elements under a given li follow suit with the one above, so when they push the 2nd row li up all the ones below also go up without any further modification

How can I make this happen? I've reviewed their CSS and can't mane any sense of it. If I write similar code I can get this far but when I try to pull it up it looks like this

My HTML is generated in a template then modified by javascript so here is what it looks like in the first picture when all is said and done and this is the CSS

.optli{
    width:300px;
    position:relative;
}
.optli li{
    line-height:20px;
    min-height:20px;
}
.optli_right{
    margin-left:320px; 
}
.optli_left{
}
.optli_container{
    width:640px;
    height:auto;
}
.optli_container_hidden{
    overflow:hidden;
    background-color:transparent;
}
.optli_container_open{
    overflow:visible;
    background-color:#AAAAAA;
}

Answer 1

EDIT: Actual solution (see comments)

The issue was because the OP had floated content inside each li and not cleared them. By applying overflow: hidden to each li the issue was resolved.

---

Because you haven't posted a functional example of your implementation (with JavaScript) I can't tell you why your implementation isn't working, however it is probably due to CSS specificity and overwriting the margins.

The HTML and CSS is really quite simple, you should be able to implement it like so:

Working example (http://jsfiddle.net/georeith/7kDyQ/5/)

HTML:

<ul id="products">
    <li>product 1</li>
    <li>product 2</li>
    <li>product 3</li>
    <li class="column-2 up">product 4</li>
    <li class="column-2">product 5</li>
    <li class="column-2">product 6</li>
    <a href="#" id="show-more">Show more &raquo;</a>
</ul>

CSS:

#products {
    width: 100px; /* Width of one column */
    border: 1px solid;
    list-style-type: none;
    margin: 0;
    padding: 5px;
    overflow: hidden; /* Hide offset list items */
    float: right;
}

#products.open {
    width: 200px; /* Width of however many columns you need to show */
}

#products li {
    width: 100px; /* Here you specify the width of a column */
    margin: 0;
    padding: 0 5px;
    height: 20px; /* We use equal height here, you will want to change this and calculate the height of each column with JavaScript */
}

#products li.column-2.up {
    margin-top: -60px; /* You should do this with JavaScript in production as you can't guarantee the height depending on your content's length */
}

#products li.column-2 {
    margin-left: 100px; /* (Column width X (Column number - 1)); */
}

#show-more {
    display: block;
    padding: 5px;
    text-align: right;
}

JS (using jQuery):

var $products = $("#products");
var open = $products.hasClass("open");
$("#show-more").on("click", function(e) {
    e.preventDefault();
    e.stopPropagation();
    if (open) {
        $products.removeClass("open");
        this.innerHTML = "Show more »"
    } else {
        $products.addClass("open");
        this.innerHTML = "Close ⊗";
    }
    open = !open;
});

Modify to meet your needs.

Answer 2

it's only the first <li> of the second column which has a negative margin-top:

here is my working DEMO