Home/ Questions/Q 4582280
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T21:03:08+00:00

I have a structure of nested lists and I am trying to style them

  • 0

I have a structure of nested lists and I am trying to style them with CSS. I want each level to be indented more than each previous one, but I want the top border for each list to extend all the way to the end of the parent list. Here is what I have:

<!DOCTYPE html>
<html><head>
<title>nested list test</title>
<style type="text/css">
ul, li {
  margin: 0; padding: 0; list-style: none;
}
#outer {
  width: 300px; border: solid black 2px;
}
#outer ul {
  border-top: solid #bbbbbb 1px;
}
#outer > li > ul > li > span {
  padding-left: 30px;
}
#outer > li > ul > li > ul > li > span {
  padding-left: 60px;
}
</style>
</head>
<body>
<ul id="outer">
  <li><span>Item 1</span></li>
  <li><span>Item 2</span>
    <ul>
      <li><span>Item 2a</span></li>
      <li><span>Item 2b</span>
        <ul>
          <li><span>Item 2b1</span></li>
          <li><span>Item 2b2</span>
            <ul>
              <li><span>Item 2b2a</span></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
</body></html>

You can see it at http://jsfiddle.net/pwaxQ/1/. It works fine when there are 3 levels but if I add a 4th, it breaks. I can add some more rules to make it work with 4 levels, but it will break if I add a 5th. And so on. I can easily make it work with Javascript, but I am wondering if there is a way to make this layout handle any depth, using CSS only, without having to come up with new rules.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could do a little dance where each list, other than the outer list, has a left margin of -1000 and a left padding of +1030, so that the border extends far to the left, and the root list has overflow set to hidden. It still won’t get arbitrarily deep, but you can increase the maximum number of levels by changing the numbers without adding extra rules.

    • 0