CSS - Added indentation is not working for nested ul li

Question

I'm newbie to CSS, I want to add some extra spacing to the ul - li s which have parent ul.optiongroup . But those ul.optiongroup can also contain more ul.optiongroup s and li s. 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>&nbsp;</span>Home
    </li>
  </ul>
  <ul class="optiongroup expand" rel="Products">
    <li class="title">
      <span class="fa fa-minus-square-o">&nbsp;</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">&nbsp;</span>PCPROducts6
      </li>
      <ul class="optiongroup" rel="6th Product">
        <li class="title">
          <span class="fa fa-plus-square-o">&nbsp;</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