Nested Lists Page

Link to Site Map

Nested List Test and Demonstration

Menu Dir OL UL DL

This page is designed to demonstrate multiple levels of nesting using lists. A similar page has also been prepared for Tables.

Often, I have wondered if my problems were because my browser wasn't working properly or somewhere I was making a mistake. This page has been tested with Netscape 3.0 and everything works properly. It is also a demonstration of one of the more effective ways to achieve nested lists. If you have another method, please let me know.

Please note: this page has been setup with a false left margin using tables. All of the nesting below takes place inside a table. This will make the page look as though the lists start with a larger indent than normal. The horizontal rule between each nesting will indicate where the real margins reside. Experiment with your own situation to see the results.

Somehow, the nesting of the lists has messed up the tables, so I put in a horizontal rule between the tables, so you can see the non-tables margins, just in case.

The demonstrations presented here are without any form of attribute to allow you to see exactly what the defaults will look like in your situation. See the various list pages for demonstrations of their attributes. Headings have been bolded only to make them more easily seen. They do not default to this condition.

Nested <Menu> Lists

The following test uses 4 levels of nesting for the <menu> tag. I have found no publication that indicates the maximum limit to nesting. Since most typographical guides recommend a limit of 4 levels of nesting, I have limited this test to 4.

Note: the headings have been bolded (<b>) to show the various levels of indent.

this is a list heading
  • item one
  • item two
  • item three this is a list heading
  • nested item one this is a list heading
  • 2nd level nested item one
  • 2nd level nested item two this is a list heading
  • 3rd level nested item one
  • 3rd level nested item two
  • 3rd level nested item three this is a list heading
  • 4th level nested item one
  • 4th level nested item two
  • 4th level nested item three
  • 2nd level nested item three
  • nested item two
  • nested item three
  • item four

    • This is what the code looks like:

    <menu>
    <lh>this is a list heading</lh>
       <li>item one
       <li>item two
       <li>item three
       <menu>
       <lh>this is a list heading</lh>
       <li>nested item one
          <menu>
          <lh>this is a list heading</lh>
          <li>2nd level nested item one
          <li>2nd level nested item two
             <menu>
             <lh>this is a list heading</lh>
             <li>3rd level nested item one
             <li>3rd level nested item two
             <li>3rd level nested item three
                <menu>
                <lh>this is a list heading</lh>
                <li>4th level nested item one
                <li>4th level nested item two
                <li>4th level nested item three
                </menu>
             </menu>
          <li>2nd level nested item three
          </menu>
       <li>nested item two
       <li>nested item three
       </menu>
    <li>item four
    </menu>
    Nested <Dir> Lists

    Note: the headings have been bolded (<b>) to show the various levels of indent.

    This is a list heading
  • item one
  • item two
  • item three This is a list heading
  • nested item one This is a list heading
  • 2nd level nested item one
  • 2nd level nested item two This is a list heading
  • 3rd level nested item one
  • 3rd level nested item two
  • 3rd level nested item three This is a list heading
  • 4th level nested item one
  • 4th level nested item two
  • 4th level nested item three
  • 2nd level nested item three
  • nested item two
  • nested item three
  • item four
    • This is what the code looks like:
    <dir>
       <lh>This is a list heading
    </lh>    <li>item one
       <li>item two
       <li>item three
          <dir>
          <lh>This is a list heading
    </lh>       <li>nested item one
             <dir>
             <lh>This is a list heading
    </lh>          <li>2nd level nested item one
             <li>2nd level nested item two
                <dir>
                <lh>This is a list heading
    </lh>             <li>3rd level nested item one
                <li>3rd level nested item two
                <li>3rd level nested item three
                   <dir>
                   <lh>This is a list heading
    </lh>                <li>4th level nested item one
                   <li>4th level nested item two
                   <li>4th level nested item three
                   </dir>
                </dir>
             <li>2nd level nested item three
             </dir>
          <li>nested item two
          <li>nested item three
          </dir>
       <li>item four
    </dir>
    Nested <OL> Lists
      This is a list heading
    1. item one
    2. item two
    3. item three
        This is a list heading
      1. nested item one
          This is a list heading
        1. 2nd level nested item one
        2. 2nd level nested item two
            This is a list heading
          1. 3rd level nested item one
          2. 3rd level nested item two
          3. 3rd level nested item three
              This is a list heading
            1. 4th level nested item one
            2. 4th level nested item two
            3. 4th level nested item three
        3. 2nd level nested item three
      2. nested item two
      3. nested item three
    4. item four
    This is what the code looks like:

    <ol>
       <lh>This is a list heading
       <li>item one
       <li>item two
       <li>item three
          <ol>
          <lh>This is a list heading
          <li>nested item one
             <ol>
             <lh>This is a list heading
             <li>2nd level nested item one
             <li>2nd level nested item two
                <ol>
                <lh>This is a list heading
                <li>3rd level nested item one
                <li>3rd level nested item two
                <li>3rd level nested item three
                   <ol>
                   <lh>This is a list heading
                   <li>4th level nested item one
                   <li>4th level nested item two
                   <li>4th level nested item three
                   </ol>
                </ol>
             <li>2nd level nested item three
             </ol>
          <li>nested item two
          <li>nested item three
          </ol>
       <li>item four
    </ol>
    Nested <UL> Lists
      This is a list heading
    • item one
    • item two
    • item three
        This is a list heading
      • nested item one
          This is a list heading
        • 2nd level nested item one
        • 2nd level nested item two
            This is a list heading
          • 3rd level nested item one
          • 3rd level nested item two
          • 3rd level nested item three
              This is a list heading
            • 4th level nested item one
            • 4th level nested item two
            • 4th level nested item three
        • 2nd level nested item three
      • nested item two
      • nested item three
    • item four
    This is what the code looks like:

    <ul>
       <lh>This is a list heading
    </lh>    <li>item one
       <li>item two
       <li>item three
          <ul>
          <lh>This is a list heading
    </lh>       <li>nested item one
             <ul>
             <lh>This is a list heading
    </lh>          <li>2nd level nested item one
             <li>2nd level nested item two
                <ul>
                <lh>This is a list heading
    </lh>             <li>3rd level nested item one
                <li>3rd level nested item two
                <li>3rd level nested item three
                   <ul>
                   <lh>This is a list heading
    </lh>                <li>4th level nested item one
                   <li>4th level nested item two
                   <li>4th level nested item three
                   </ul>
                </ul>
             <li>2nd level nested item three
             </ul>
          <li>nested item two
          <li>nested item three
          </ul>
       <li>item four
    </ul>
    Nested Definition <DL> Lists

              I've kept this one simple. Again, there is no published limit to the number of nestings that I have found. Definition Lists are a bit different than the other lists. In this case, there are two list positions, not one. Nesting can be achieved in both positions as demonstrated below.
    List Heading
    Nested List in the Data Term position
    Definition Term
    Definition Data
    Definition Term
    Nested List in the Data Description position
    Definition Term
    Definition Data
    Definition Term
    Definition Data
    Definition Term
    Definition Data
    Definition Term
    Definition Data
    Definition Data
    Definition Term
    Definition Data
    Definition Term
    Definition Data
    This is what the code looks like:

    <dl>
       <lh>List Heading<br>    <dt>   <dl>
             <lh>Nested List in the Data Term position
             <dt>Definition Term
                <dd>Definition Data
             <dt>Definition Term
                <dd>   <dl>
                   <lh>Nested List in the Data Description position
                   <dt>Definition Term
                      <dd>Definition Data
                   <dt>Definition Term
                      <dd>Definition Data
                   <dt>Definition Term
                      <dd>Definition Data
                   </dl>
             <dt>Definition Term
                <dd>Definition Data
          </dl>
          <dd>Definition Data
       <dt>Definition Term
          <dd>Definition Data
       <dt>Definition Term
          <dd>Definition Data
    </dl>