あらわれる

• 第一階層（経営層）
  • 第二階層（部門）
    • 第三階層（チーム）
    • 第三階層（チーム）
    • 第三階層（チーム）

.construction {
list-style-type: none;
}

.construction ul {
margin: 0;
padding: 0;
list-style-type: none;
}

.construction ul {
position: relative;
margin-left: 15px;
}

.construction ul:before {
content: “”;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 0;
border-left: 1px solid red;
}

.construction ul li {
position: relative;
margin: 0;
padding: 7px 15px;
}

.construction ul li:before {
content: “”;
display: block;
position: absolute;
top: 15px;
left: 0;
width: 15px;
height: 0;
border-top: 1px solid blue;
}

.construction ul li:last-child:before {
top: 15px;
bottom: 0;
height: auto;
background-color: #fff;
}

/* 以下はクリック時のスタイル */
.construction ul li > ul {
display: none; /* 初期状態で非表示 */
}

.construction ul li:hover > ul {
display: block; /* ホバー時に表示 */
}