.nav-wrapper.container
  .nav
    - for (var x = 0; x < 8; x++)
      .dropdown
        a.nav-link Category
        .megamenu
          p.megamenu__title Category Name
            a.megamenu__mainlink Shop All
          .featured-categories
            each val in [1, 2, 3, 4, 5]
              .featured
                img(src="https://source.unsplash.com/random/250x250", alt="")
                .featured-title Category Item
          p.megamenu__title.megamenu--small More in Category 
          .megamenu__linklist
            each val in [1, 2, 3, 4, 5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
              a(href="google.com").megamenu__shortlink LinkItem
          //- each unordered in [1,2,3,4,5]
          //-   ul
          //-     each list in [1,2,3,4,5]
          //-       li
          //-         a= "I'm link number " + list
View Compiled
@mixin screen-min($min) { @media (min-width: $min) { @content } };

/* Global Base Styles and Resets */
* {
  box-sizing: border-box;
}
body {
  background-color: #EEF0ED;
  font-family: roboto;
}
/* Bootstrap features for responsiveness */
.container {
  margin: 0 auto;
  width: 100%;
  @include screen-min(768px){max-width: 750px;}
  @include screen-min(992px){max-width: 970px;}
  @include screen-min(1200px){max-width: 1170px;}
}

/* THE BASIC NAVBAR ONLY */
.nav-wrapper {
    background: #000000;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #434343, #000000);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #434343, #000000); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.nav {
  display: flex;
  justify-content: space-between;
  text-align: center;
  
  box-shadow: 0 2px 2px rgba(1,3,0,.25), inset 0 1px 0 #2c8c00, inset 1px 0 0 #000000;
}
.dropdown {
  width: 100%;
  border-right: 1px solid black;
  &:last-of-type {
    border-right: none;
  }
}
.nav-link {
  color: white;
  width: 100%;
  display: block; /* No default display values for anchors */
  padding: 10px;
}

/* -----------------------------------------------------------------*/
/* IMPORTANT! THINGS THAT DIRECTLY AFFECT DROPDOWN TRANSITIONS */
.nav-link {
  transition: all 0.3s ease 0.15s;
  &:hover{
    background-color: #cd2027;
  }
}
.nav {
  position: relative; /* This sets width of megamenu to 100% */
}
.megamenu {
  position: absolute; /* Note that position relative is not based on direct parent(dropdown), but rather its parent parent (.nav)*/
  display: block;
  width: 100%;
  left: 0;
  top: 39px; /* This number depends on height of the "a" tag */
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  background: white;
  transition: all 0.3s ease 0.15s;
  
 -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  box-shadow: 0 1px 3px 0 rgba(0,0,0,.25), 0 5px 20px 0 rgba(0,0,0,.2);
  
  padding: 20px;
}

.dropdown:hover .megamenu {
  opacity: 1;
  visibility: visible;
  overflow: visible;
}

/* ------------------------------------------------------------------ */
/* THE CONTENTS */
ul {
  width: 20%;
  float: left;
}
li {
  list-style-type: none;
}
.megamenu {
  p {
    margin-top: 0;
  }
  &__title{
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    border-bottom: 1px solid #dadbd9;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }
  &__mainlink {
    padding-left: 10px;
    font-size: 14px;
    font-weight: normal;
  }
  &--small {
    font-size: 16px;
  }
  &__linklist {
    display: flex;
    flex-wrap: wrap;
  }
  &__shortlink {
    max-height: 100px;
    margin-right: 10px;
  }
}
.featured-categories {
  display: flex;
  justify-content: space-between;
  
}
.featured {
  &:hover {
    img {
      padding: 4px;
      border: 1px solid #dadbd9;
    }
  }
  img {
    width: 95px;
    padding: 5px;
  }
}
.featured-title {
  font-size: 14px;
  margin-bottom: 16px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js