CSS only responsive MENU

by ajinkyax

HTML

<aside>
<label for="menubutton">CLICK ME</label>
<input type="checkbox" id="menubutton">
<ul class="menu">
    <li id="overviewTab">
        <a href="/overview" active-link="activeTab">overview</a>
    </li>
    <li id="usersTab" ng-if="currentUser.isAdmin">
        <a href="/manage/users" active-link="activeTab">users</a>
    </li>
    <li id="settingsTab" ng-if="currentUser.isAdmin">
        <a href="/settings" active-link="activeTab">settings</a>
    </li>
    <li id="webhooksTab">
        <a href="/webhooks" active-link="activeTab">webhooks</a>
    </li>
</ul>

</aside>

SCSS

/* Display Dropdown when clicked on Parent Lable */
aside #menubutton {
  display: block;
  padding: 10px;
  background: #ede7f6;
  width: 100px;
  cursor: pointer;
  
  &:checked + ul.menu {
    display: block !important;
  }
}

.menu {
  display: none;
  background-color: #ff867f;
  border-top: 10px solid #ff5252;
  width: 250px;
  margin: 0;
  padding: 5px;
  
  li {
    list-style: none;
    display: block;
    background-color: #ede7f6;
    padding: 10px;
    border-bottom: 1px solid #c60055;
    
    a {
      text-decoration: none;
      color: #c60055;
    }
  }
}