UL列表

Question

我試圖做到的是這一形象：

現在是我到目前爲止已經做的是：

<ul class="flechalista"> 
<li><a href="#">2012</a> 
<ul class="flechalista"> 
    <li>Enero</li> 
     <li>Febrero</li> 
    <li>Marzo</li> 
     <li>Abril</li> 
</ul> 
</li> 
</ul> 

和我的CSS是這樣的：

.flechalista{background:#fff;} 
.flechalista li{background:#fff url(../img/red_arrow.png) no-repeat 10px 4px; padding:5px 0 5px 30px !important; border-bottom:1px solid #000;} 

現在這個工作，除了你可以看到border-底部是每一個李和全寬。
我想我可以用少填充（2012）來創建第一個LI，而LI的月份會有更多的填充。但有沒有一種方法使用我有一個與CSS玩它使其工作？

Answer 1

.flechalista{background:#fff;} 
.flechalista li ul li{padding:5px 0 5px 50px !important; border-bottom:1px solid #000;} 
.flechalista li a{padding:5px 0 5px 10px !important; display:block; width:100%; border-bottom:1px solid #000;} 

演示：http://jsfiddle.net/calder12/FSa2S/5/