stacked elements?

[Hailwood]

Hi there,

 

 

Im creating an UL based menu,

 

 

however for the design each li must be 9px under the previous

this is to create an effect of them stacking ontop of each other.

 

 

now the problem is i cant just move the up by 9px,

 

 

i have to have an algorithm like this

 

 

 

1) i = 0;

2) Top = -(9*i);

3) i++;

 

 

now i could do that with javascript, but is there a way to achieve this without javascript?

 

 

 

 

 

 

 

 

 

 

[haku]

Not exactly. CSS is not a computational language, so it doesn't work that way.

 

But, you could make each list tag in a nested list, giving each list an indent:

 

<ul>
  <li>list item 1
    <ul>
      <li>list item 2
        <ul>
          <li>list item 3</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

 

ul
{
  margin-left:9px;
}

[Hailwood]

Hi there,


Thanks for the reply,

however i was not wanting an incremental indentation,
it was for the top element to overlap the bottom element slightly,


i ended up doing it like so: 

#menu_left ul li {

    display: block;

    height: 39px;

    position: relative;

    margin-top: -18px;

    padding-top: 9px;

}