html - 具有全宽边框定位的另一个 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;}

​ ​</p>

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