Nested Lists With Indenting Dynamic Paddings

Take a look at my code example at js bin: http://jsbin.com/iritep/3/edit I'd like to indent the yellow colored item without continuing my hard coded css-rule: ul li a {padding-lef

Solution 1:

I'm sorry, Stackoverflow didn't allow me to comment twice in such short notice. Here is the link to the solution to my problem.

http://jsbin.com/iritep/5/edit#javascript,html,live

Solution 2:

Change your css-rules slightly, you could do the following:

ul li{
  padding-left:20px;
}

This would indent every new level 20px further. See, if that still suits you. (indenting lists generally brings some minor styling-restrictions (like coloring a single line via li or a Element.))