Html 使列表项以特定方式（顺序）彼此重叠

所以我真的不知道如何用语言来解释。但这正是我想要实现的

这就是我到目前为止所做的

ul.quicktabs-tabs li{
浮动：左；
高度：20px；
保证金：0；
右边距：-20px；
填充：0；
宽度：150px；
背景：透明；
}
ul.quicktabs-tabs li a{
字体家族：继承；
保证金：0；
显示：块；
填充：10px 27px 10px 7px；
文字装饰：无；
颜色：#6da648！重要；
边框：2px实心#6da648；
边界半径：6px；
保证金：0；
背景：#fff；
}
ul.quicktabs-tabs li.active a，ul.quicktabs-tabs li.active a：悬停{
颜色：#fff！重要；
背景位置：右-20px；
背景#6da648；
}
快速标签{
裕度：0 10px 0；
字体大小：11px；
列表样式：无；
填充：1px23px23px0；
}

我使用指南创建了一个进度条：

.meter{
高度：40px；
/*什么都可以*/
位置：相对位置；
利润率：60px 0 20px 0；
/*只是为了演示间隔*/
-moz边界半径：25px；
-webkit边界半径：25px；
边界半径：25px；
-webkit盒阴影：插入0-1px 1px rgba（255,255,255,0.3）；
-moz盒阴影：插入0-1px1pRGBA（255,255,255,0.3）；
框阴影：插入0-1px1pRGBA（255,255,255,0.3）；
边框：实心1倍橙色；
}
.米>跨度{
显示：块；
身高：100%；
-webkit边框右上半径：8px；
-webkit边框右下半径：8px；
-moz边框半径右上角：8px；
-moz边框半径右下角：8px；
边框右上角半径：8px；
边框右下半径：8px；
-webkit边框左上半径：20px；
-webkit边框左下半径：20px；
-左上角moz边界半径：20px；
-moz边框半径左下角：20px；
边框左上半径：20px；
边框左下半径：20px；
背景色：rgb（4319483）；
背景图像：-webkit渐变（线性，左下，左上，颜色停止（0，rgb（43，194，83）），颜色停止（1，rgb（84，240，84））；
背景图像：-莫兹线性梯度（中底，rgb（4319483）37%，rgb（84240，84）69%）；
-webkit盒阴影：插入0 2px 9px rgba（255,255,255,0.3），插入0-2px 6px rgba（0,0,0,0.4）；
-moz盒阴影：插入0 2px 9px rgba（255,255,255,0.3），插入0-2px 6px rgba（0,0,0,0.4）；
方框阴影：插入0 2px 9px rgba（255,255,255,0.3），插入0-2px 6px rgba（0,0,0,0.4）；
位置：相对位置；
溢出：隐藏；
}
.meter>span:after..animate>span>span{
内容：“；
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：0；
背景图像：-webkit渐变（线性，0 0，100%100%，颜色停止（.25，rgba（255，255，255，.2）），颜色停止（.25，透明），颜色停止（.5，透明），颜色停止（.5，rgba（255，255，255，.2）），颜色停止（.75，rgba（255，255，255，.2）），颜色停止（.75，透明）到（透明））；
背景图像：-莫兹线性梯度（-45度，rgba（255，255，255，.2）25%，透明25%，透明50%，rgba（255，255，255，.2）50%，rgba（255，255，255，.2）75%，透明75%，透明）；
z指数：1；
-webkit背景大小：50px 50px；
-moz背景大小：50px 50px；
背景尺寸：50px 50px；
-webkit动画：移动2s线性无限；
-moz动画：移动2s线性无限；
-webkit边框右上半径：8px；
-webkit边框右下半径：8px；
-moz边框半径右上角：8px；
-moz边框半径右下角：8px；
边框右上角半径：8px；
边框右下半径：8px；
-webkit边框左上半径：20px；
-webkit边框左下半径：20px；
-左上角moz边界半径：20px；
-moz边框半径左下角：20px；
边框左上半径：20px；
边框左下半径：20px；
溢出：隐藏；
}
.动画>跨度：之后{
显示：无；
}
@-webkit关键帧移动{
0% {
背景位置：0；
}
100% {
背景位置：50px 50px；
}
}
@-moz关键帧移动{
0% {
背景位置：0；
}
100% {
背景位置：50px 50px；
}
}
.orange>span{
背景色：#f1a165；
背景图像：-莫兹线性梯度（顶部，#f1a165，#f36d0a）；
背景图像：-webkit渐变（线性、左上、左下、颜色停止（0，#f1a165）、颜色停止（1，#f36d0a））；
背景图像：-webkit线性渐变（#f1a165，#f36d0a）；
}
.red>span{
背景色：#f0a3a3；
背景图像：-moz线性梯度（顶部，#f0a3a3，#f42323）；
背景图像：-webkit渐变（线性、左上、左下、颜色停止（0，#f0a3a3）、颜色停止（1，#f42323））；
背景图像：-webkit线性梯度（#f0a3a3，#f42323）；
}
.nostripes>span>span、.nostripes>span:after{
-webkit动画：无；
-moz动画：无；
背景图像：无；
}

给你：

必须为整个列表指定边框，而不是列表项。此代码现在已修复此问题。

ul.quicktabs-tabs li{
高度：20px；
宽度：150px；
浮动：左；
背景：透明；
}
ul.quicktabs-tabs li a{
字体家族：继承；
保证金：0；
显示：块；
填充：10px 27px 10px 7px；
文字装饰：无；
颜色：#6da648！重要；
保证金：0；
背景：#fff；
}
ul.quicktabs-tabs li.active a{边界半径：0 18px 18px 0；}
ul.quicktabs-tabs li.active a，ul.quicktabs-tabs li.active a：悬停{
颜色：#fff！重要；
背景位置：右-20px；
背景#6da648；
}
快速标签{
裕度：0 10px 0；
字体大小：11px；
列表样式：无；
帕丁