<ul class="parent">
<li>
Categories
<ul>
<li>Programming</li>
<li>Technology</li>
<li>Storyboards</li>
<li>Idea</li>
</ul>
</li>
<li>
Works
<ul>
<li>Web</li>
<li>App</li>
<li>Service</li>
<li>Photo</li>
</ul>
</li>
<li>About us</li>
<li>Contact</li>
<li>Access</li>
<li>Terms</li>
<li>Privacy</li>
</ul>
// Layout Style
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(5, 1fr);
gap: 24px 40px;
li {
&:first-of-type {
grid-column: 1 / 2;
grid-row: 1 / 7;
}
&:nth-of-type(2) {
grid-column: 2 / 3;
grid-row: 1 / 7;
}
@for $i from 3 through 8 {
&:nth-of-type(#{$i}) {
grid-column: 3 / 4;
grid-row: #{$i - 2} / #{$i - 1};
}
}
}
}
// Base Style
body {
padding: 24px 0;
background: #04293A;
letter-spacing: 0.1em;
}
ul {
list-style: none;
margin: 0;
padding: 0;
li {
color: #fff;
}
ul {
li {
margin-top: 12px;
}
}
}
.parent {
margin: 0 auto;
max-width: 900px;
& > li {
position: relative;
font-weight: bold;
&::before {
content: "";
display: block;
position: absolute;
top: 10px;
left: -18px;
width: 12px;
height: 3px;
background: #ECB365;
}
}
ul {
li {
font-size: 14px;
color: #aaa;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.