Deploy floating LI only on click, not on other li

Question

It is hard to explain so naked with me. I have a list of questions that on click have a hidden content div that turns on and off. This works great, however, since my LI floats, when I open one of the LIs, it pushes the content adjacent to it.

Clicking opens (space) content

    LI   |    LI
    LI   |    LI
    LI   |    LI
  content|   
  content|   
    LI   |    LI

What I want (no spaces)

    LI   |    LI
    LI   |    LI
    LI   |    LI
  content|    LI
  content|
    LI   |    

HTML

<ul class="main">
    <li>Some stuff
        <ul class="subMain"><li>content content content</li></ul>
    </li>
    <li>Some stuff
        <ul class="subMain"><li>content content content</li></ul>
    </li>
    <li>Some stuff
        <ul class="subMain"><li>content content content</li></ul>
    </li>
    <li>Some stuff
        <ul class="subMain"><li>content content content</li></ul>
    </li>
</ul>

CSS

.main { 
    list-style: none; 
    margin: 0; padding: 10px 0; 
    width: 500px; 
    border: 1px solid #000;
    overflow: hidden;
}
.main li { 
    width: 50%; height: auto;
    float: left; 
    border-bottom: 1px solid #e5e5e5;
    overflow: hidden;
}
.subMain { 
  margin: 0; padding: 0; display: none;  
}

JQuery

$('ul.main li').click(function () {
   $(this).find('.subMain').slideToggle(500); 
});

The riddle is here http://jsfiddle.net/S89Uv/2/

Should I put these LI in columns?

Answer 1

jsfiddle jQuery, HTML 2 , , . CSS . , ?

http://jsfiddle.net/S89Uv/7/

jQuery :

var everyOtherLi = $('ul.main li:odd');
var firstColumnList = $('ul.main');
var secondColumnList = $('<ul class="main"></ul>').insertAfter(firstColumnList);
secondColumnList.append(everyOtherLi);