LI选项卡列表和包装问题

Question

我有一个标签式LI系统，当屏幕缩小时（正确地）包裹。但是，这些选项卡下面的内容需要从已包装的最后一个选项卡下面开始。有人能告诉我这是怎么做到的吗？

FIDDLE

http://jsfiddle.net/jeljeljel/k5prw30g/5/

HTML

<div class="bwtab">
    <ul>
        <li class="active">AAAAAAAA1</li>
        <li>AAAAAAAA2</li>
        <li>AAAAAAAA3</li>
        <li>AAAAAAAA4</li>
        <li>AAAAAAAA5</li>
        <li>AAAAAAAA6</li>
        <li>AAAAAAAA7</li>
        <li>AAAAAAAA8</li>
        <li>AAAAAAAA9</li>
        <li>AAAAAAAA10</li>
    </ul>
</div>
<div>This content should display below the tabs</div>

CSS

.bwtab {
    clear: both;
    position: relative;
    border-bottom: 1px solid #AAA;
    height: 34px;
    font-size: 14px;
    cursor: default;
}
.bwtab ul {
    position: absolute;
    padding: 0;
    padding-left: 5px;
    margin-top:7px;
}
.bwtab li {
    list-style: none;
    float: left;
    padding: 5px 10px;
    margin-left: 5px;
    margin-top: 1px;
    cursor: pointer;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border: 1px solid #AAA;
    border-bottom: 0;
    margin-bottom: 5px;
}
.bwtab li.active {
    background-color: #FFF;
    border-bottom: 1px solid #FFF;
}