ul列表在另一个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;}

现在这样可行，除了你可以看到边框底部是每个li和全宽 我认为我可以用较少的填充（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/