How to create a multilevel list in HTML?

7 replies
multilevel list in HTML
#create #html #list #multilevel
  • Profile picture of the author hrishivardhan
    Use Google search engine for answer. You will find W3C school's website where they have all basic HTML tutorials
    Signature
    Orderhive is a multichannel
    Inventory Management Software
    {{ DiscussionBoard.errors[10568473].message }}
    • Profile picture of the author KMoore171
      Originally Posted by hrishivardhan View Post

      Use Google search engine for answer. You will find W3C school's website where they have all basic HTML tutorials
      W3C Schools is definitely a great source, or you can choose a website, any really, and right click, hit inspect element and check out the coding of the page on the right of your browser window
      {{ DiscussionBoard.errors[10798506].message }}
  • Profile picture of the author deepCode
    I have no idea what you mean. An <ul> in an <ul>?
    You can also make multiple <ul>s and just give them a padding/margin-left so it looks like the one is on a different level.
    Signature
    Artificial Intelligence meets content marketing

    >>> AI-Writer.com <<<


    You write the headline & our AI writes the article. (FREE while in alpha)

    {{ DiscussionBoard.errors[10568475].message }}
  • Profile picture of the author JasmineJasmine
    Creating a multilevel list in HTML is harder than creating a multilevel list in a word processor, but can still be achieved using HTML and CSS. Below are steps on how to create a multilevel list in HTML with the aid of CSS.
    Before trying the following steps realize that to create a multilevel list in HTML you must nest the a list into another list item. Also, because HTML only has either a bullet list or number list if you want to change the type of list you must use CSS to create a new style type.
    {{ DiscussionBoard.errors[10571096].message }}
  • Profile picture of the author Jamesvictor
    Creating actual multilevel lists in RoboHelp will always require you to edit in HTML mode if your topics need to be valid HTML. A list has one level on which it uses a sequence. Each new list within the list will use a different sequence. You can use this method if you use only global styles, list classes or list item styles. If you use list item styles, you cannot change the style of a nested list through the WYSIWYG editor.

    Another great advantage of real multilevel lists is that you can easily combine ordered lists and unordered lists.

    Remember the HTML syntax for a single unordered list:

    1
    2
    3
    4
    <ul>
    <li>Item one</li>
    <li>Item two</li>
    </ul>
    If we want to nest a list behind item one, we add a new list like this:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <ul>
    <li>Item one
    <ul>
    <li>Item one.one</li>
    <li>Item one.two</li>
    </ul>
    </li>
    <li>Item two</li>
    </ul>
    Item one
    Item one.one
    Item one.two
    Item two
    Note the correct syntax: The new list (ul) is added before the list item that contains the list is closed!

    You create a multilevel list by selecting the list and clicking the Increase indent (Increase indent) and Decrease indent (Decrease indent) buttons. Select the item you want to add to a different level and click the appropriate button. Please note that the list will display correct, but that the HTML of the list is invalid. (See above remark and syntax example.)

    One last remark: The standard margins of nested lists vary per browser. To avoid different rendering in different browsers, set a global style for nested lists in your style sheet, such as: UL UL, UL OL, OL OL and OL UL.
    {{ DiscussionBoard.errors[10581341].message }}
  • {{ DiscussionBoard.errors[10801567].message }}
  • Profile picture of the author yukon
    Banned
    Learn to view/read page source code then copy/paste HTML formatting.
    {{ DiscussionBoard.errors[10806117].message }}

Trending Topics