CSS - Added indentation is not working for nested ul li - html

Question

I'm newbie to CSS, I want to add some extra spacing to the ul -lis which have parent ul.optiongroup. But those ul.optiongroup can also contain more ul.optiongroups and lis. So. Here is the html look like [Pl.see my old query for reference if required] and the JsFiddle:
NESTED UL-LIs:
<div id="target" class="treeselector">
<div class="styledSelect">
Select
</div>
<ul class="optiongroup expand" rel="Home">
<li class="title">
<span> </span>Home
</li>
</ul>
<ul class="optiongroup expand" rel="Products">
<li class="title">
<span class="fa fa-minus-square-o"> </span>Products
</li>
<li rel="PCPROducts1" class="expand">
PCPROducts1
</li>
<li rel="PCPROducts5" class="expand">
PCPROducts5
</li>
<ul class="optiongroup expand" rel="PCPROducts6">
<li class="title">
<span class="fa fa-plus-square-o"> </span>PCPROducts6
</li>
<ul class="optiongroup" rel="6th Product">
<li class="title">
<span class="fa fa-plus-square-o"> </span>6th Product
</li>
<li rel="Digital">
Digital
</li>
<li rel="Analog">
Analog
</li>
</ul>
</ul>
</ul>
</div>
Tried to add CSS like this:
.optiongroup li{
margin-left:40px;
border: 1px red solid; /* Just to see what's happening there */
}
How can I achieve this?
What's the easiest way to design ul -li with minimum css here.

Answer 1

You're using a lot of UL tags when its not needed.
You could try doing something like this:
<ul>
<li>Lorem</li>
<li>Aliquam</li>
<li>
<ul>
<li>Lorem ipsum .</li>
<li>Aliquam tincidunt</li>
<li>Vestibulum</li>
</ul>
</li>
<li>Lorem ipsum</li>
<li>Aliquam tincidunt</li>
</ul>
Notice that second UL is inside the LI