Tables of Contents (toc)

HTML Nested Lists

Nested lists (list inside list) are possible:

Example : 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>A Nested List</title>
</head>
<body>
    <h2>A Nested List</h2>
    <p>Nested lists (list inside list) are possible:</p>

    <ul>
      <li>Coffee
        <ul>
          <li>Arabica Coffee</li>
          <li>Robusta Coffee</li>
          <li>Black Coffee</li>
        </ul>
      </li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>
</body>
</html>

Run Code

MR STAR EDIT

CSS-enhanced Horizontal List

With CSS, HTML lists may be styled in a variety of ways.
One common method is to build a navigation menu by styling a list horizontally:

Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>A Nested List</title>
    <style>
        ul {
          list-style-type: none;
          margin: 0;
          padding: 0;
          overflow: hidden;
          background-color: #35853e;
      }

      li {
          float: left;
      }

      li a {
          display: block;
          color: white;
          text-align: center;
          padding: 16px;
          text-decoration: none;
      }

      li a:hover {
          background-color: #e72727;
      }
  </style>
</head>
<body>
    <h2>Menu of Navigation</h2>
    <p>In this illustration, a navigation menu is made by using CSS to design the list horizontally:</p>

    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#contact">Contact Us</a></li>
      <li><a href="#about">About Us</a></li>
    </ul>
</body>
</html>
MR STAR CREATOR
Rate this post

Categorized in: