CSS and 2nd level lists

There isn't a way to identify "levels" as far as i am aware using CSS. You would need to declare the margin directly on the second UL element.

You could use Inline fairly easy for the UL items you want to be different.

You could also use an ID tag if you are not wanting to define a Class.

Thanks for your reply.

I have hundreds of pages to convert so I was hoping for something I could set for all lists without having to edit each one.

This page led me to believe styling sub-levels of lists was possible: http://www.rtbwizards.com/helpcenter/css/csslists.html

ul.someClass > li {
  /* style immediate children here
}
ul ul > li {
   /* style second level children here */
}

ul ul ul > li {
   /* style third level children here */
}

Select allOpen in new window

Note you set a class on the top most element. Alternatives are to target a parent container that you could do

.parentContainerClass > ul

Select allOpen in new window

If no suitable parent container exists then just class the top-most <ul> elements - the rest of the styling can flow from there.

Working sample
CSS

<style type="text/css">
ul {
	list-style: none;
}
ul.top > li {
	padding: 15px 10px;
	border: 1px solid #d2d3d4;
}
ul ul > li {
	margin: 0;
	padding: 0;
	color: red;
}
ul ul ul > li {
	font-size: 2em;
	color: blue;
}
</style>

Select allOpen in new window

HTML

	<ul class="top">
		<li>I am a level 1 item</li>
		<li>I am a level 1 item with kids
			<ul>
				<li>I am a level 2 item</li>
				<li>I am a level 2 item with kids
					<ul>
						<li>I am a level 3 item</li>
						<li>So am I</li>
					</ul>
				</li>
				<li>Just a normal 2 am a level 1 item</li>
			</ul>
		</li>
		<li>Just a normal I am a level 1 item</li>
	</ul>

Select allOpen in new window

Working sample here
In the sample I demonstrate how to style the different levels independently. Note we give a class to the top <ul> as a starting point - from there on everything is relative.

We could get around using the class by saying

body > ul

Select allOpen in new window

But this assumes the ul is an immediate child of body which may not be the case

Julian,

I tested and it seemed to work.

However, can it also apply a margin to the second-level list?

In the attached screenshot you see what I have. I want the second-level list to have no top margin so it is up against the previous level's bullet.

HTML looks like:

<ul>
                    <li>General concept or idea (e.g., "Good Feedback Principles")

                      <ul>
                        <li>Examples of the concept idea (e.g., "Timely," "Accurate")</li>
                      </ul>
                    </li>

                    <li>Category (e.g., "Car")

                      <ul>
                        <li>Members of category (e.g., "Ford," "Chevy")</li>
                      </ul>
                    </li>

                    <li>Team

                      <ul>
                        <li>Members of team</li>
                      </ul>
                    </li>

                    <li>Organization

                      <ul>
                        <li>Departments or functions</li>
                      </ul>
                    </li>
                  </ul>

Thanks,

Steve
Capture.GIF

You have given us the HTML without the CSS that goes with it - we cannot see from this what is causing that gap - could be margin or padding.

We need a link or the CSS or you can check yourself by opening the page, right clicking one of the <li> elements and then checking to see what the gap is being caused by in the inspector (window on the right - check the computed window to see a visual representation)

If it is padding then

ul.topclassselector > li > ul {
  padding-top: 0;
  padding-bottom: 0;
}

Select allOpen in new window

If it is margin then

ul.topclassselector > li > ul {
  margin-top: 0;
  margin-bottom: 0;
}

Select allOpen in new window

Easiest would be to provide a link to a page that demonstrates the problem so we can give you a definitive solution

Oh,  yeah, I didn't think about sharing that.

Here is a page: http://app2.goebase.com/methodologies/action_learning_fullresource.asp?pass=1

If you scroll down to Step 3. Identify the problem or the target group and then look a down a bit further, you can see a second and third level list.

Thank you.

If you go to this page: http://app2.goebase.com/overviews/lean_overview_fullresource.asp?pass=1, and scroll down to the bullet that reads "Reduce Movement", you'll see that the child bullet has a good amount of space between it and it's parent. Would that not be fixed as well from what you sent me?

Thanks.

That spacing is caused by the <p> element above the <ul> not the ul itself.

Ah, how did I miss that?!? Thank you.

You are welcome

Julian,

On this page: http://app2.goebase.com/overviews/competency_models_fullresource.asp?pass=1

If you scroll down to the "Issue E: Generating an initial list of competencies",

You'll see a 2-level list. The second level doesn't seem to have the 0 margin.

Any thoughts?

It depends how you implemented the change. My solution was based on an ordered list (ol) that list is an unordered list so you want

ul.list-spaced ul, ol.list-spaced ul {
  margin-top: 0;
}

Select allOpen in new window

or just

.list-spaced ul {
  margin-top: 0;
}

Select allOpen in new window

My solution also specifically targeted 3 level lists and that is a two level lists which will not be targeted by the original solution.

OK, thanks. I didn't know it was targeting 3 levels.

On this page: http://app2.goebase.com/overviews/information_dashboards_fullresource.asp , if you find "What, if any, comparisons do we with to make?", the children list there has a large top margin. Does that require something else?

Please ignore my last question. I see that I have to declare the class to the parent list.