CODEWITHSUNDEEP
htmlcss
trex
trex

Reputation: 4057

CSS - Added indentation is not working for nested ul li

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>&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 */
}

Upvotes: 1

Views: 304

Answers (1)

LukeD1uk
LukeD1uk

Reputation: 242

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

Upvotes: 1

Related Questions