CODEWITHSUNDEEP
csshtml-lists
Reg Gordon
Reg Gordon

Reputation: 253

How to Indent Child UL items

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. enter image description here

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

Upvotes: 0

Views: 4018

Answers (2)

bozdoz
bozdoz

Reputation: 12860

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.

Upvotes: 1

Frank van Puffelen
Frank van Puffelen

Reputation: 598827

Your HTML looks like this:

<ul>
  <li>...
  <ul>
    <li>....

With the following CSS applied to it:

ul {
  margin-left: 2em;
}

Just change the value to 1em and the indent will be less.

Upvotes: 2

Related Questions