Nested Flex-box Side-nav

by Ahmad Baktash Hayeri

HTML

<div class="list">
  <div class="list-item">
    <h4>
      Item 1
    </h4>
  </div>
  <div class="list-item">
    <h4>Item 2</h4>
    <div class="list">
      <div class="list-item">
        <h5>
          Sublist item 1
        </h5>
        <div class="list">
          <div class="list-item">
            <h6>
          Sublist item 1
        </h6>
          </div>
          <div class="list-item">
            <h6>
          Sublist item 1
        </h6>
          </div>
          <div class="list-item">
            <h6>
          Sublist item 1
        </h6>
          </div>
        </div>
      </div>
      <div class="list-item">
        <h5>
          Sublist item 1
        </h5>
      </div>
      <div class="list-item">
        <h5>
          Sublist item 1
        </h5>
      </div>
    </div>
  </div>
  <div class="list-item">
    <h4>
      Item 3
    </h4>
  </div>
</div>

CSS

.list {
  width: 250px;
  display: flex;
  flex-direction: column;
  border: 2px solid gray;
}

.list-item {
  background: silver;
  border-bottom: 1px solid gray;
}

h4 {
  color: maroon;
}

h5 {
  color: lightblue;
}

h6 {
  color: green;
}