<ul class="nav">
   
   <li class="nav-item">
      <a href="#profile" class="nav-link">Profile</a>
      <div id="profile" class="nav-submenu">
         <a href="#" class="nav-submenu-link">Posts</a>
         <a href="#" class="nav-submenu-link">Images</a>
      </div>
   </li>
   
   <li class="nav-item">
      <a href="#msg" class="nav-link">Messages</a>
      <div id="msg" class="nav-submenu">
         <a href="#" class="nav-submenu-link">New</a>
         <a href="#" class="nav-submenu-link">Sent</a>
      </div>
   </li>
   
   <li class="nav-item">
      <a href="#setting" class="nav-link">Settings</a>
      <div id="setting" class="nav-submenu">
         <a href="#" class="nav-submenu-link">Password</a>
         <a href="#" class="nav-submenu-link">Language</a>
      </div>
   </li>
   
   <li class="nav-item">
      <a href="#exit" class="nav-link">Exit</a>
   </li>
   
</ul>

body, html {
   height: 100%;
}
body {
   font-family: 'Mulish', sans-serif;
   background: #222;
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
}
.nav {
   list-style-type: none;
   border-radius: 10px;
   background: #666;
   margin: 0;
   padding: 0;
   width: 300px;
   overflow: hidden;
}

.nav-item {
   font-size: 20px;
   background: #9701f0;
   border-bottom: 1px solid rgba(63, 46, 73, 0.3);
}

.nav-item:last-child {
   border-bottom: none;
}

.nav-link, .nav-submenu-link {
   text-decoration: none;
   padding: 16px 20px;
   display: block;
   color: #fff;
}

.nav-submenu {
   overflow: hidden;
   max-height: 0;
   transition: max-height 0.5s;
   background: #3f2e49;
}
.nav-submenu:target {
   max-height: 10rem;
}
.nav-submenu-link {
   font-size: 16px;
   background: transparent;
   transition: background 0.2s ease-in;
}
.nav-submenu-link:hover {
   background: #36253f;
}