Question

what I am trying to accomplish is this image:

now what I’ve done so far is:

<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 my css is this:

.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;}

Now this works except that as you can see the border-bottom is for every li and full width.
I think I could make a first LI with less padding(2012) and the months LI’s would have a bit more padding. But is there a way using what i have an playing with the css make it work?

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;}

​
​

Demo: http://jsfiddle.net/calder12/FSa2S/5/