非固定排版中，如何插入一行

需求是这样，下面是一个li里套的很多span组成的分类，当点击其中分类时，会出来其子分类，在点击处下方，插入一行，显示子分类？难点在：
1、下面的行业分类是不固定的，所以只能用float来自动换行
2、如果用postion定位，只能是浮动在下一行上方，遮盖住下一行
HTML code

<style>
body,ul,li{line-height:20px;margin:0;padding:0;list-style:none;font-size:12px}
.main{width:400px;}
.main label{width:85px;float:left}
.main li span{display:block;float:left;margin-left:10px;}
</style>
<div class="main">
    <ul>
        <li>
        <label>行业分类:</label>
        <span>食品行业</span>
        <span>商业贸易</span>
        <span>日用轻工</span>
        <span>其他工业</span>
        <span>农林牧副渔</span>
        <span>能源</span>
        <span>旅游</span>
        <span>工程建筑</span>
        <span>建材</span>
        
        <span>工程机械</span>
        <span>机械仪器</span>
        <span>石化</span>
        <span>化肥</span>
        <span>公用事业</span>
        <span>服务业</span>
        <span>纺织</span>
        
        <span>电子信息</span>
        <span>电力</span>
        <span>传播娱乐</span>
        <span>车类</span>
        <span>交通</span>
        <span>材料</span>
        <span>通信</span>
        
        <span>有色金属</span>
        <span>综合</span>
        <span>国家机构</span>
        <span>中国要人</span>
        <span>印刷包装</span>
        <span>IT业</span>
        <span>媒体</span>
        </li>
    </ul>
</div>

这个是插入后效果

好吧，这个问题有点难度。

嗯，她娘的，我也觉得这个是个非常蛋疼的实现，但必须得这么做