Javascript 带jquery的CSS3滑块构造函数

我需要这样做，让它看起来像这样

这就是它现在的样子

或

问题是：如果我使用一个ul和两个或两个以上的li，则幻灯片容器将覆盖下一个li。（这里是示例）

如果我在所有信息中使用一个ul和一个li，那么我必须在ul之间找出差距（这里是示例）

我怎样才能做到，像截图中那样？谢谢

css唯一的解决方案

HTML

---

所以。。。这是我的方法，使用您已经构建的模板：

我把格林一班从李移到了斯潘

<li>
    <span class="OpenClose green">Novembr 2013 <cc>&#x25B2;</cc></span>
    <div class="orange">Some information here 2<a title="Download file 11" href="./download.php?file_id=11"></a>
    </div>
</li>

我将内部div左边的边距设置为5px

#download_j li div {
    display: none;
    width: 705px;
    height: 30px;
    margin: 0 0 7px 5px;
    background: #F7F5F2;
    font-size: 18px;
    color: #333;
    padding: 10px 0 0 20px;
    text-decoration: none;
    position:relative;
}

您可以在这里查看：

<li>
    <span class="OpenClose green">Novembr 2013 <cc>&#x25B2;</cc></span>
    <div class="orange">Some information here 2<a title="Download file 11" href="./download.php?file_id=11"></a>
    </div>
</li>

#download_j li {
    width: 300px;
    margin: 0 0 7px 0;
}

#download_j li div {
    display: none;
    width: 705px;
    height: 30px;
    margin: 0 0 7px 5px;
    background: #F7F5F2;
    font-size: 18px;
    color: #333;
    padding: 10px 0 0 20px;
    text-decoration: none;
    position:relative;
}