My goal is to achieve a design similar to the following image:
Here's what I've accomplished so far:
<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>
and here's my current 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;}
Although this setup works, the border-bottom spans the full width of every list item. Is there a way to modify the existing CSS to achieve the desired result without changing the structure?