title: How to Indent Child UL items
body: <p>Hello ive spent about 4 hours on this tonight and ive had to give up with all my hair torn out. I try not to ask simple enough css questions but i just cant get a grip with list items or more specifically child list items. One rule for all i find.</p>
  
  <pre><code>&lt;li class="parent open"&gt;
  &lt;span class="parent open"&gt;&lt;/span&gt;
  &lt;a href="/member-tags/forum"&gt;Member Tags&lt;/a&gt;
  &lt;ul&gt;
  &lt;li class="parent open"&gt;
  &lt;span class="parent open"&gt;&lt;/span&gt;
  &lt;a href="/world-komp/forum"&gt;world of komp&lt;/a&gt;
  &lt;ul&gt;
  &lt;li&gt;
  &lt;a href="/komps-bets/forum"&gt;komps bets&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
  &lt;a href="/komps-daily-diary/forum"&gt;komps daily diary&lt;/a&gt;
  &lt;/li&gt;
  ...
  </code></pre>
  
  <p>I was wanting to make the indent smaller on my child items and also the text a little smaller to accomodate them. Here's a screen shot. the black things on the left are supposed to be arrows indicating where i was hoping to have my child items.
  <img src="https://i.stack.imgur.com/kQOX9.jpg" alt="enter image description here"> </p>
  
  <p>you can view the code on my website
  <a href="http://onlinebanter.com" rel="nofollow noreferrer">http://onlinebanter.com</a></p>
  
  <p>all help appreciated as i really have spent too much time trying to figure this out and it is not the first night i have tried.</p>
  
  <p>thanks</p>
  
  <pre><code>ul.jquerymenu li.parent {
    background-image:none;
    list-style:none none;
  }
  .block ul {
    margin:0;
    padding:0 0 0.25em 1em;
  }
  
  ul.menu {
    border:none;
    list-style:none;
    text-align:left;
  }
  
  ul {
    list-style-type:disc;
  }
  .block ul, .block ol {
    margin-left:2em;
    padding:0;
  }
  
  ul, ol, dd {
    margin-bottom:1.5em;
    margin-left:2em;
  }
  
  ul.menu li {
    margin:0 0 0 0.5em;
  }
  
  li, li.leaf, ul.menu li, .item-list ul li {
    line-height:150%;
  }
  
  ul.menu li, ul.links li {
    margin:0;
    padding:0;
  }
  
  ul.jquerymenu li.parent {
    background-image:none;
    list-style:none none;
  }
  
  ul.menu li {
    margin:0 0 0 0.5em;
  }
  
  li, li.leaf, ul.menu li, .item-list ul li {
    line-height:150%;
  }
  
  ul.menu li, ul.links li {
    margin:0;
    padding:0;
  }
  </code></pre>