How to create a multilevel list in HTML

Discussion in 'Programming/Scripts' started by semajames, Mar 3, 2016.

  1. semajames

    semajames New Member

    multilevel list in HTML
     
  2. ztk.me

    ztk.me ISPConfig Developer ISPConfig Developer

  3. justinvirk

    justinvirk New Member

    The only valid child of either a ul or ol is an li element; an li can, however, contain a ul (or ol).To achieve your aim:

    <ul>
    <li>myItem 1</li>
    <li>myItem 2</li><listyle="list-style-type:none">
    <ul>
    <li>myItem 2a</li>
    </ul></li>
    <li>myItem 3</li>
    <li>myItem 4</li></ul>
     
    Last edited: Apr 18, 2016
    albertrobber likes this.
  4. <ol>
    <li>1</li>
    <ol>
    <li>1.1 Sub Ponit Of 1</li>
    <ol>
    <li>1.1.1 sub point of 1.1</li>
    <li>1.1.2 sub point of 1.1</li>
    <li>1.1.3 sub point of 1.1</li>
    </ol>
    <li>1.2 Sub Ponit Of 1</li>
    <ol>
    <li>1.2.1 sub point of 1.2</li>
    <li>1.2.2 sub point of 1.2</li>
    <li>1.2.3 sub point of 1.2</li>
    </ol>
    <li>1.3 Sub Ponit Of 1</li>
    <ol>
    <li>1.3.1 sub point of 1.3</li>
    <li>1.3.2 sub point of 1.3</li>
    <li>1.3.3 sub point of 1.3</li>
    </ol>
    </ol>
    <li>2</li>
    <ol>
    <li>2.1 Sub Ponit Of 2</li>
    <ol>
    <li>2.1.1 sub point of 2.1</li>
    <li>2.1.2 sub point of 2.1</li>
    <li>2.1.3 sub point of 2.1</li>
    </ol>
    <li>2.2 Sub Ponit Of 2</li>
    <ol>
    <li>2.2.1 sub point of 2.2</li>
    <li>2.2.2 sub point of 2.2</li>
    <li>2.2.3 sub point of 2.2</li>
    </ol>
    <li>2.3 Sub Ponit Of 2</li>
    <ol>
    <li>2.3.1 sub point of 2.3</li>
    <li>2.3.2 sub point of 2.3</li>
    <li>2.3.3 sub point of 2.3</li>
    </ol>
    </ol>
    <li>3</li>
    <ol>
    <li>3.1 Sub Ponit Of 3</li>
    <ol>
    <li>3.1.1 sub point of 3.1</li>
    <li>3.1.2 sub point of 3.1</li>
    <li>3.1.3 sub point of 3.1</li>
    </ol>
    <li>3.2 Sub Ponit Of 3</li>
    <ol>
    <li>3.2.1 sub point of 3.2</li>
    <li>3.2.2 sub point of 3.2</li>
    <li>3.2.3 sub point of 3.2</li>
    </ol>
    <li>3.3 Sub Ponit Of 3</li>
    <ol>
    <li>3.3.1 sub point of 3.3</li>
    <li>3.3.2 sub point of 3.3</li>
    <li>3.3.3 sub point of 3.3</li>
    </ol>
    </ol>
    </ol>
     
  5. ifour.parth

    ifour.parth New Member

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Nested Lists</title>
    </head>
    <body>
    <h1>Things to do today</h1>
    <ol>
    <li>Feed cat
    <ul>
    <li>Rinse bowl</li>
    <li>Open cat food</li>
    <li>Mix dry and wet food in bowl</li>
    <li>Deliver on a silver platter to Pixel</li>
    </ul></li>
    <li>Wash car
    <ul>
    <li>Vacuum interior</li>
    <li>Wash exterior</li>
    <li>Wax exterior</li>
    </ul></li>
    <li>Grocery shopping
    <ul>
    <li>Plan meals</li>
    <li>Clean out fridge</li>
    <li>Make list</li>
    <li>Go to store</li>
    </ul></li>
    </ol>
    </body>
    </html>
     

Share This Page