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
     
    semajames, Mar 3, 2016
    #1
  2. ztk.me

    ztk.me Well-Known Member HowtoForge Supporter

    ztk.me, Mar 4, 2016
    #2
  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
    justinvirk, Apr 15, 2016
    #3
    albertrobber likes this.
  4. Prahlad Makwana

    Prahlad Makwana Banned

    <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>
     
    Prahlad Makwana, Jul 26, 2019
    #4
  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>
     
    ifour.parth, Jul 30, 2019
    #5

Share This Page