.nav-wrapper.container
  .nav
    - for (var x = 0; x < 8; x++)
      .dropdown
        a Category
        .megamenu
          p hello
          p world
View Compiled
@mixin screen-min($min) { @media (min-width: $min) { @content } };

/* Global Base Styles and Resets */
* {
  box-sizing: border-box;
}
body {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/867725/black-wood-small.jpg);
  color: white;
}
/* 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-color: grey;
}
.nav {
  display: flex;
  justify-content: space-between;
  text-align: center;
}
.dropdown {
  width: 100%;
  border-right: 1px solid black;
  &:last-of-type {
    border-right: none;
  }
}
a {
  color: white;
  width: 100%;
  display: block; /* No default display values for anchors */
  padding: 10px;
}

/* -----------------------------------------------------------------*/
/* IMPORTANT! THINGS THAT DIRECTLY AFFECT DROPDOWN TRANSITIONS */
a {
  transition: all 0.3s ease 0.15s;
  &:hover{
    background-color: red;
  }
}
.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: red;
  transition: all 0.3s ease 0.15s;
}

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.