响应式汉堡超级菜单

Question

我创建了一个大型菜单，但是我试图将其转换为适用于移动设备的响应式汉堡菜单。我不是很精通bootstrap或javascript，所以我正在尝试在html / css中完成所有操作（如果可能的话）。这是我尝试进行Responsive Menu Example

的示例

预先感谢您的帮助，因为我对此感到很沮丧

这是我创建的大型菜单：

HTML：

<nav>
      <div class="menu-container">
      <ul class="menu-main">
          <li><a href="">PRODUCTS</a>
            <div class="menu-sub">
              <div class="menu-col-1">
                <h3 class="menu-category">APPAREL</h3>
                  <ul class="">
                    <li><a href="">Head Wear</a></li>
                    <li><a href="">T-Shirts</a></li>
                    <li><a href="">Polos</a></li>
                    <li><a href="">Hoodies</a></li>
                    <li><a href="">Dress Shirts</a></li>
                    <li><a href="">Jackets</a></li>
                    <li><a href="">Vests</a></li>
                    <li><a href="">Active Wear</a></li>
                    <li><a href="">Pants</a></li>
                    <li><a href="">Shorts</a></li>
                 </ul>
                </div>

                <div class="menu-col-2">
                 <h3 class="menu-category">PROMO</h3>
                  <ul>
                    <li><a href="">Pens</a></li>
                    <li><a href="">Journals</a></li>
                    <li><a href="">Bags</a></li>
                    <li><a href="">Technology</a></li>
                    <li><a href="">Drink Ware</a></li>
                    <li><a href="">Trade Show</a></li>
                    <li><a href="">Golf</a></li>
                    <li><a href="">Emergency Kits</a></li>
                    <li><a href="">Gift Sets</a></li>
                 </ul>
                </div>

                <div class="menu-col-3">
                 <h3 class="menu-category">PRICE RANGE</h3>
                  <ul>
                    <li><a href="">0 - 1</a></li>
                    <li><a href="">1 - 2</a></li>
                    <li><a href="">2 - 3</a></li>
                    <li><a href="">3 - 5</a></li>
                    <li><a href="">5 - 10</a></li>
                    <li><a href="">10 - 20</a></li>
                    <li><a href="">20 - 30</a></li>
                 </ul>
                </div>
              </div>
            </li>
          <li><a href="">GRAPHIC DESIGN</a>
            <div class="menu-sub">
              <h3 class="menu-category">BRANDING</h3>
                <ul>
                  <li><a href="#">Logo Design</a></li>
                  <li><a href="#">Stationary Package</a></li>
                  <li><a href="#">Signage</a></li>
                  <li><a href="#">Vector Art</a></li>
                </ul>
              </div>
          </li>
          <li><a href="">ABOUT US</a></li>
          <li><a href="">CONTACT US</a></li>
      </ul>
      </div>
      </nav>

CSS：

    .menu-container {
        position: absolute;
        right: 100px;
        bottom: 0px;
    }

    nav {
        background: #252525;
    }


    nav ul {
        list-style: none;
        margin: 0px;
        padding: 0px;
        position: relative;
    }

    nav li {
        display: inline-block;
    }

    nav a {
        font-family: Roboto;
        font-size: 16px;
        font-weight: 500;
        letter-spacing: .05em;
        padding: 16px 14px;
        display: block;
        text-decoration: none;
        color: #fff;
    }

    nav li:hover {
        background: #69bf4a;
    }


    .menu-sub {
        position: absolute;
        left: 0px;
        background: #252525;
        width: 75%;
        color: #fff;
        padding: 1em;
        display: none;

    }

    nav li:hover .menu-sub {
        display: block;
    }

    .menu-sub li {
        display: block;
    }

    .menu-sub a {
        background: #252525;
        display: block;
        padding: .05em 0;
        margin-bottom: .25em;
        font-size: 14px;
        font-weight: 300;
    }

    .menu-sub li {
        background: #252525;
        margin-left: .25em;
    }

    .menu-sub a:hover {
        color: #69bf4a;
    }

    .menu-category {
        margin: .5em 0 .5em .25em;
        font-family: Roboto;
        font-size: 16px;
        font-weight: 500;
        letter-spacing: 0.05em;

    }

    .menu-category:first-of-type {
        margin-top: 0;
    }

    .menu-col-1,
    .menu-col-2,
    .menu-col-3 {
        float: left;
    }

    .menu-col-1 {
        width: 35%;
    }

    .menu-col-2 {
        width: 35%;
    }