Question

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.

<li class="parent open">
<span class="parent open"></span>
<a href="/member-tags/forum">Member Tags</a>
<ul>
<li class="parent open">
<span class="parent open"></span>
<a href="/world-komp/forum">world of komp</a>
<ul>
<li>
<a href="/komps-bets/forum">komps bets</a>
</li>
<li>
<a href="/komps-daily-diary/forum">komps daily diary</a>
</li>
...

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.

you can view the code on my website
http://onlinebanter.com

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.

thanks

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;
}

Answer 1

In your particular situation you can use the selector .parent .parent ul, like so:

.parent .parent ul {
margin-left: 1em;
font-size: 10pt;
}

.parent .parent ul finds a ul element that is a child of an element with a class parent that is again a child of another element with a class parent. Like this:

<tag class="parent">
  <tag class="parent">
  </tag>
</tag>

In that example, there is an element (tag) with a class of parent, inside of an element (tag) with a class of parent. So the CSS could be .parent .parent { ... }

Now, put a UL element in there:

<tag class="parent">
  <tag class="parent">
     <ul>
     </ul>
  </tag>
</tag>

Now the CSS selector could be .parent .parent ul { ... }

Hope that helps.