Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="supernav-container">                          
      <div class="main-nav">                                  
        <dt class="has-supercategories">Item title</dt>       
        <dd class="super-nav">                   
          <ul class="super-nav-categories">
            <li>
              Subcategory title                  
              <ul class="super-nav-subcats">
                <li>Subcategory item</li>
              </ul>
            </li>
          </ul>
        </dd>
        <dt class="has-supercategories">Another item title</dt>
                <dd class="super-nav">                   
          <ul class="super-nav-categories">
            <li>
              Another Subcategory title                  
              <ul class="super-nav-subcats">
                <li>Scroll me!!!</li>
                <li>Another Subcategory item</li>
                <li>Another Subcategory item</li>
              </ul>
            </li>
          </ul>
        </dd>
      </div>
    </div>

SassMeister-input.scss

// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// ----

//Some other stuff.
*{box-sizing:border-box;}

.main-nav{
  line-height:60px;
}

.super-nav-subcats{
  background: #ccc;

}

/*:::::::::::::::::::::::::::::::::::::::::::

  Responsive No-JS Jumbo-nav by @doot0

  Note: this implementation does not provide styling; do that bit yourself.

  Markup structure:

    <div class="supernav-container">                          :: Primary container
      <div class="main-nav">                                  :: Contains nav
        <dt class="has-supercategories">Item title</dt>       :: Primary nav item title
        <dd class="super-nav">                                :: Jumbo nav instance (can have many)
          <ul class="super-nav-categories">                   :: Jumbo nav categories container
            <li>
              Subcategory title                               :: Title of sub category (can have many)
              <ul class="super-nav-subcats">                  :: Contains list of items for subcategory
                <li>Subcategory item</li>
              </ul>
            </li>
          </ul>
        </dd>
      </div>
    </div>
    
  IMPORTANT: Each super-nav instance MUST be proceeded by a <dt> with the "has-supercategories" class.

::::::::::::::::::::::::::::::::::::::::::::*/

//Super-nav vars
$primary-color : #ddd;
$mobile-breakpoint : 640px;
$primary-cat-width : 33.3%;
$ui-padding : 1em;

.supernav-container{
  .mobile-nav{
    display: none;
  }
  .mobile-nav.active + .main-nav {
    display: block !important;
  }
  .main-nav{
    text-align: center;
    position: relative;
    .super-nav{
      display: none;
      padding: $ui-padding;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      height: auto;
      width: 100%;
      margin: 0 auto;
      z-index: 1000;
      max-width: $mobile-breakpoint;
      background-color: $primary-color;
      &:hover{display:block;}
      .super-nav-categories{
        position: relative;
        text-align: left;
        & > li{
          width: $primary-cat-width;
          .super-nav-subcats{
            display: none;
            position: absolute;
            left: $primary-cat-width;
            top: 0;
            right: 0;
            bottom: 0;
            overflow-y: auto;
            &:hover{display: block}
          }
          &:hover .super-nav-subcats{
            display: block;
          }
        }
      }
    }
    & > dt,
    & > dd {display: inline-block;}
    & > dt + dd,
    & > dd + dt,
    & > dt + dd,
    & > dt + dt{
      margin-left: 1em;
    }
    .has-supercategories{
      &:hover + .super-nav{
        display: block;
      }
    }
  }
}

@media screen and (max-width: $mobile-breakpoint){
  .supernav-container{
    .mobile-nav{display: block}
    .main-nav{
      a { display : block; padding: 1em; margin: -1em }
      display: none;
      & > dt, & > dd{ display: block;}
      & > dt + dd,
      & > dd + dt,
      & > dt + dd,
      & > dt + dt{
        margin-left: 0;
      }
      & > dt{
        padding: 1em;
        border-top: 1px solid;
      }
      .super-nav{
        display: block;
        position: static;
        .super-nav-categories{
          text-align: center;
          & > li {
            font-weight: bold;
            width : 100%;
            + li { margin-top: 1em }
            .super-nav-subcats{
              font-weight: 400;
              display: block;
              position: static;
              overflow: visible;
            }
          }
        }
      }
    }
  }
}

SassMeister-output.css

* {
  box-sizing: border-box;
}

.main-nav {
  line-height: 60px;
}

.super-nav-subcats {
  background: #ccc;
}

/*:::::::::::::::::::::::::::::::::::::::::::

  Responsive No-JS Jumbo-nav by @doot0

  Note: this implementation does not provide styling; do that bit yourself.

  Markup structure:

    <div class="supernav-container">                          :: Primary container
      <div class="main-nav">                                  :: Contains nav
        <dt class="has-supercategories">Item title</dt>       :: Primary nav item title
        <dd class="super-nav">                                :: Jumbo nav instance (can have many)
          <ul class="super-nav-categories">                   :: Jumbo nav categories container
            <li>
              Subcategory title                               :: Title of sub category (can have many)
              <ul class="super-nav-subcats">                  :: Contains list of items for subcategory
                <li>Subcategory item</li>
              </ul>
            </li>
          </ul>
        </dd>
      </div>
    </div>
    
  IMPORTANT: Each super-nav instance MUST be proceeded by a <dt> with the "has-supercategories" class.

::::::::::::::::::::::::::::::::::::::::::::*/
.supernav-container .mobile-nav {
  display: none;
}
.supernav-container .mobile-nav.active + .main-nav {
  display: block !important;
}
.supernav-container .main-nav {
  text-align: center;
  position: relative;
}
.supernav-container .main-nav .super-nav {
  display: none;
  padding: 1em;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: auto;
  width: 100%;
  margin: 0 auto;
  z-index: 1000;
  max-width: 640px;
  background-color: #dddddd;
}
.supernav-container .main-nav .super-nav:hover {
  display: block;
}
.supernav-container .main-nav .super-nav .super-nav-categories {
  position: relative;
  text-align: left;
}
.supernav-container .main-nav .super-nav .super-nav-categories > li {
  width: 33.3%;
}
.supernav-container .main-nav .super-nav .super-nav-categories > li .super-nav-subcats {
  display: none;
  position: absolute;
  left: 33.3%;
  top: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
}
.supernav-container .main-nav .super-nav .super-nav-categories > li .super-nav-subcats:hover {
  display: block;
}
.supernav-container .main-nav .super-nav .super-nav-categories > li:hover .super-nav-subcats {
  display: block;
}
.supernav-container .main-nav > dt, .supernav-container .main-nav > dd {
  display: inline-block;
}
.supernav-container .main-nav > dt + dd, .supernav-container .main-nav > dd + dt, .supernav-container .main-nav > dt + dd, .supernav-container .main-nav > dt + dt {
  margin-left: 1em;
}
.supernav-container .main-nav .has-supercategories:hover + .super-nav {
  display: block;
}

@media screen and (max-width: 640px) {
  .supernav-container .mobile-nav {
    display: block;
  }
  .supernav-container .main-nav {
    display: none;
  }
  .supernav-container .main-nav a {
    display: block;
    padding: 1em;
    margin: -1em;
  }
  .supernav-container .main-nav > dt, .supernav-container .main-nav > dd {
    display: block;
  }
  .supernav-container .main-nav > dt + dd, .supernav-container .main-nav > dd + dt, .supernav-container .main-nav > dt + dd, .supernav-container .main-nav > dt + dt {
    margin-left: 0;
  }
  .supernav-container .main-nav > dt {
    padding: 1em;
    border-top: 1px solid;
  }
  .supernav-container .main-nav .super-nav {
    display: block;
    position: static;
  }
  .supernav-container .main-nav .super-nav .super-nav-categories {
    text-align: center;
  }
  .supernav-container .main-nav .super-nav .super-nav-categories > li {
    font-weight: bold;
    width: 100%;
  }
  .supernav-container .main-nav .super-nav .super-nav-categories > li + li {
    margin-top: 1em;
  }
  .supernav-container .main-nav .super-nav .super-nav-categories > li .super-nav-subcats {
    font-weight: 400;
    display: block;
    position: static;
    overflow: visible;
  }
}

SassMeister-rendered.html

<div class="supernav-container">                          
      <div class="main-nav">                                  
        <dt class="has-supercategories">Item title</dt>       
        <dd class="super-nav">                   
          <ul class="super-nav-categories">
            <li>
              Subcategory title                  
              <ul class="super-nav-subcats">
                <li>Subcategory item</li>
              </ul>
            </li>
          </ul>
        </dd>
        <dt class="has-supercategories">Another item title</dt>
                <dd class="super-nav">                   
          <ul class="super-nav-categories">
            <li>
              Another Subcategory title                  
              <ul class="super-nav-subcats">
                <li>Scroll me!!!</li>
                <li>Another Subcategory item</li>
                <li>Another Subcategory item</li>
              </ul>
            </li>
          </ul>
        </dd>
      </div>
    </div>