<figure> 
  <figcaption>Example sitemap</figcaption>
  <ul class="tree">
    <li><span>TOPページ</span>
      <ul>
        <li><span>企業理念</span>
          <ul>
            <li><span>社長より</span>
              <ul>
                <li><span>プロフィール</span></li>
              </ul>
            </li>
            <li><span>コンセプト</span>
              <ul>
                <li><span>社会貢献</span></li>
                <li><span>製品</span></li>
                <li><span>個人情報</span></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><span>リクルート</span>
          <ul>
            <li><span>技術者</span>
              <ul>
                <li><span>エンジニア</span></li>
              </ul>
            </li>
            <li><span>その他</span>
              <ul>
                <li><span>営業職</span></li>
                <li><span>企画</span></li>
                <li><span>デザイナー</span></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><span>お問い合わせ</span>
          <ul>
            <li><span>メールフォーム</span>
              <ul>
                <li><span>SNS</span></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</figure>
<p><a href="https://medium.com/@ross.angus/sitemaps-and-dom-structure-from-nested-unordered-lists-eab2b02950cf" target="_blank">Full writeup</a></p>
body {
  font-family: sans-serif;
  font-size:0.85em;
}

.tree,
.tree ul,
.tree li {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.tree {
  margin: 0 0 1em;
  text-align: center;
}
.tree,
.tree ul {
  display: table;
}
.tree ul {
  width: 100%;
}
.tree li {
  display: table-cell;
  padding: 0.5em 0;
  vertical-align: top;
}
/* 横線 */
.tree li:before {
  outline: solid 1px #666;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.tree li:first-child:before {
  left: 50%;
}
.tree li:last-child:before {
  right: 50%;
}

.tree code,
.tree span {
  border: solid 0.1em #666;
  display: inline-block;
  margin: 0 0.2em 0.5em;
  padding: 0.2em 0.5em;
  position: relative;
}

.tree code {
  font-family: monospace;
}

/* 縦線 */
.tree ul:before,
.tree code:before,
.tree span:before {
  outline: solid 1px #666;
  content: "";
  height: 0.5em;
  left: 50%;
  position: absolute;
}
.tree ul:before {
  top: -0.5em;
}
.tree code:before,
.tree span:before {
  top: -0.55em;
}

.tree > li {
  margin-top: 0;
}
.tree > li:before,
.tree > li:after,
.tree > li > code:before,
.tree > li > span:before {
  outline: none;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.