UL with different margin/padding

[ggouweloos]

I am using a CMS that outputs a menu as HTML with UL and LI tags.I want to make a CSS that indents the first 10 LI's, but not with the same value.The HTML output from the CMS looks something like this:

<UL><LI>menu 1</LI><LI>menu 2</LI><LI>menu 3</LI><LI>menu 4</LI></UL>

I want to have: "menu 1" with a 24px indent "menu 2" with a 10px indent "menu 3" with a 16px indent "menu 4" with a 12px indent.. etc.. etcIt is not possible to give the LI tags a class/id.Is there a way to make a CSS implementation for this. I assume the menu will not get any larger than 8 or 10 LI items.

[jlhaslip]

Why can't the li have a class?

<style type="text/css" >.m1 { margin-left: 3em; }.m2 { margin-left: 1em; }.m3 { margin-left: 2em; }.m4 { margin-left: 1.5em; }</style><UL><LI class="m1" >menu 1</LI><LI class="m2" >menu 2</LI><LI class="m3" >menu 3</LI><LI class="m4" >menu 4</LI></UL>

Used em's for spacing since the font-size increases may affect the pixel offsets. Pixels would work.

[ggouweloos]

Why can't the li have a class?

This would require a hack in the CMS software, since it does not output the class definition in the LI items by itself. But there probably is no other way?

[Synook]

If you don't want to support IE 6 or lower:

ul li {margin-left:24px;}ul.menu li + li {margin-left:10px;}ul.menu li + li + li {margin-left:16px;}/* etc */

[Synook]

If you don't want to support IE 6 or lower:

ul li {margin-left:24px;}ul.menu li + li {margin-left:10px;}ul.menu li + li + li {margin-left:16px;}/* etc */