Generated by SassMeister.com.

input.scss

// base

:root {
  --black: black;
  --light-gray: #eee;
  --white: white;
  --navy: navy;
  --green: green;
}

*, *::before, *::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--white);
}

// typography

* {
  font-family: arial, sans-serif;
  font-weight: bold;
}

a {
  font-weight: normal;
}

// menus

.menus-wrapper {
  width: 60%;
  max-width: 600px;
  height: 400px;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  background: var(--light-gray);
  .menu-outer {
    width: calc(50% - 0.5px);
    .menu-btn {
      padding: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: var(--green);
      cursor: pointer;
      &.menu-btn_closed {
        background: var(--navy);
        .chevron-icon {
          transform: rotate(0);
        }
      }
      &:hover {
        background: var(--green);
      }
      .menu-btn-label {
        color: var(--white);
      }
      .chevron-icon {
        margin-left: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        transform: rotate(180deg);
        .chevron-icon-svg {
          width: 30px;
          fill: var(--white);
        }
      }
    }
    .menu-inner {
      height: 160px;
      overflow: hidden;
      background: white;
      transition: height 0.25s linear;
      &.menu-inner_closed {
        height: 0;
      }
      .menu-label {
        margin: 15px 10px 10px 10px;
      }
      .menu-content {
        height: 100%;
        border: 2px solid var(--black);
        .menu-ul {
          margin: 0;
          padding: 10px;
          list-style-type: none;
          .menu-li {
            margin: 0 0 10px 0;
            padding: 0;
            &:last-of-type {
              margin-bottom: 0;
            }
          }
        }
      }
    }
  }
  @media (max-width: 480px) {
    flex-direction: column;
    justify-content: flex-start;
    .menu-outer {
      width: 100%;
      .menu-btn:last-of-type {
        margin-top: 1px;
      }
    }  
  }
}

@media (max-width: 768px) {
  .menus-wrapper {
    width: 80%;
  }
}

output.css

:root {
  --black: black;
  --light-gray: #eee;
  --white: white;
  --navy: navy;
  --green: green;
}

*, *::before, *::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--white);
}

* {
  font-family: arial, sans-serif;
  font-weight: bold;
}

a {
  font-weight: normal;
}

.menus-wrapper {
  width: 60%;
  max-width: 600px;
  height: 400px;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  background: var(--light-gray);
}

.menus-wrapper .menu-outer {
  width: calc(50% - 0.5px);
}

.menus-wrapper .menu-outer .menu-btn {
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--green);
  cursor: pointer;
}

.menus-wrapper .menu-outer .menu-btn.menu-btn_closed {
  background: var(--navy);
}

.menus-wrapper .menu-outer .menu-btn.menu-btn_closed .chevron-icon {
  transform: rotate(0);
}

.menus-wrapper .menu-outer .menu-btn:hover {
  background: var(--green);
}

.menus-wrapper .menu-outer .menu-btn .menu-btn-label {
  color: var(--white);
}

.menus-wrapper .menu-outer .menu-btn .chevron-icon {
  margin-left: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate(180deg);
}

.menus-wrapper .menu-outer .menu-btn .chevron-icon .chevron-icon-svg {
  width: 30px;
  fill: var(--white);
}

.menus-wrapper .menu-outer .menu-inner {
  height: 160px;
  overflow: hidden;
  background: white;
  transition: height 0.25s linear;
}

.menus-wrapper .menu-outer .menu-inner.menu-inner_closed {
  height: 0;
}

.menus-wrapper .menu-outer .menu-inner .menu-label {
  margin: 15px 10px 10px 10px;
}

.menus-wrapper .menu-outer .menu-inner .menu-content {
  height: 100%;
  border: 2px solid var(--black);
}

.menus-wrapper .menu-outer .menu-inner .menu-content .menu-ul {
  margin: 0;
  padding: 10px;
  list-style-type: none;
}

.menus-wrapper .menu-outer .menu-inner .menu-content .menu-ul .menu-li {
  margin: 0 0 10px 0;
  padding: 0;
}

.menus-wrapper .menu-outer .menu-inner .menu-content .menu-ul .menu-li:last-of-type {
  margin-bottom: 0;
}

@media (max-width: 480px) {
  .menus-wrapper {
    flex-direction: column;
    justify-content: flex-start;
  }
  .menus-wrapper .menu-outer {
    width: 100%;
  }
  .menus-wrapper .menu-outer .menu-btn:last-of-type {
    margin-top: 1px;
  }
}

@media (max-width: 768px) {
  .menus-wrapper {
    width: 80%;
  }
}

settings.json

{
  "sass": {
    "compiler": "libsass/3.5.5",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}