nested list css rules to support unlimited depth

Question

i have the following css:

.navi-live ol{
  margin:0;
  padding:0;
  list-style-type: none;
}
.navi-live li{
  margin:0;
  padding:0px;
  list-style-type: none;
}
.navi-live ol .nav-item-contents{
  padding-left:20px;
}
.navi-live ol ol .nav-item-contents{
  padding-left:40px;
}
.navi-live ol ol ol .nav-item-contents{
  padding-left:60px;
}
.navi-live ol ol ol ol .nav-item-contents{
  padding-left:80px;
}
.navi-live ol ol ol ol ol .nav-item-contents{
  padding-left:100px;
}

This works (I dont want to indent the li or ol but indent the content as if the li and ol are indented), but limits me to the number of css rules I have created.

How do i do the above without the limitation of having to create a new rule for every new indentation level i want to support?

jsfiddle: http://jsfiddle.net/k4hjp/1/

Thanks,

Answer 1

You should just be able to do a simple select of all the nav-item-content divs, iterate through each one while incrementing the padding variable.

jsfiddle

//put this inside a function and call it when you want to append to the navigation
var padding = 20;
$('.nav-item-contents').each(function(){
    $(this).css('padding-left',padding+'px');
    padding+=20;
});

EDIT

Added a demonstration of how to append children: jsfiddle.