Breaking ul li tree in 2 column

Question

I am having a strict two levels ul li structure. I want to display it in 2 columns as the tree is very long and want to occupy the right portion for better user friendliness. So far I have achieved this using css3 property column-count. I am getting the expected result but the problem is it is breaking a subtree which I am unable to prevent. Is there a css property which will work in combination with column-count or independently and allow me to split my tree in 2 column without breaking a sub-tree.

HTML:

<div id="parent">
    <ul>
       <li>asd
          <ul>
             <li>lmn</li>
             ...
          </ul>
       </li>
       <li>xyz
          <ul>
             <li>pqr</li>
             ...
          </ul>
       </li>
       ...
    </ul>
</div>

CSS:

#parent {
   column-count:2;
   -moz-column-count:2;
   -webkit-column-count:2
}

So far my jsfiddle looks like: http://jsfiddle.net/7WwK7/1/

Answer 1

change value display of <li> from default list-item to inline-block + width:99%;, and <li>s won't break anymore through columns.

if you still want the bullet , use a pseudo element to fake it.

http://jsfiddle.net/7WwK7/6/