<div class="menu-wrapper">
<h1 class="menu-title">Mail</h1>
<ul class="menu">
<li class="is-selected"><a class="menu__link" href="">Inbox</a></li>
<li><a class="menu__link" href="">Sent</a></li>
<li><a class="menu__link" href="">Draft</a></li>
<li><a class="menu__link" href="">Trash</a></li>
</ul>
<ul class="menu">
<li><a class="menu__link" href="">Login</a></li>
<li><a class="menu__link" href="">Register</a></li>
</ul>
</div>
.menu-wrapper {
display: grid;
grid-template-rows: auto 1fr auto;
gap: 1rem;
width: 12em;
height: 100vh;
overflow: auto;
}
html {
box-sizing: border-box;
}
html *,
html *::after,
html *::before {
box-sizing: inherit;
}
body {
font-family: tahoma;
line-height: 1.6;
color: #404040;
margin: 0;
background: #fff;
}
.menu-wrapper {
padding: 1em;
background: #56727C;
}
.menu {
padding: 0;
margin: 0;
list-style: none;
}
.menu-title {
color: #D9E9EF;
margin: 0;
}
.menu__link {
display: block;
font-size: .8em;
padding: .5em .7em;
margin: .4em 0;
color: #D9E9EF;
text-decoration: none;
border-radius: 4px;
}
.menu__link:hover,
.is-selected .menu__link {
background: #415F69;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.