* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #f8f8f8;
}

.nav_wrap ul li {
  background: black;
}
.menu {
  box-shadow: 0 1px 2px black;
}
.menu > nav > ul {
  display: flex;
}
.nav_wrap ul li {
  box-shadow: inset .1px 1px .1px .1px rgba(255, 255, 255, .2);
  position: relative;
  text-align: center;
  list-style-type: none;
  flex-grow: 1;
}
.nav_wrap ul li ul, .nav_wrap ul li ul li {
  min-width: 100%;
}

.nav_wrap ul li:hover {
  box-shadow: inset 100px 100px 100px 100px rgba(255, 255, 255, .2);
}
.nav_wrap ul li:hover > ul {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-content: stretch;
  opacity: 0.98;
}
.nav_wrap ul li a {
  text-decoration: none;
  font-family: Verdana, Arial, Helvetica, Sans-Serif;
  font-size: 12px;
  color: white;
  /* Delete this property if you want all menue items to be the same size */
  white-space: nowrap;
  padding: 10px 5px 10px 5px;
  display: block;
}
.nav_wrap ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
}
/* Left-most menus will drop down to the right and right-most menus will drop down to the left */
.nav_wrap ul li:nth-child(1) ul ul {
  top: 0;
  left: 100%;
}
.nav_wrap ul li:nth-child(2) ul ul {
  top: 0;
  left: 100%;
}
.nav_wrap ul li:nth-child(3) ul ul {
  top: 0;
  left: 100%;
}
.nav_wrap ul li:nth-child(4) ul ul {
  top: 0;
  left: 100%;
}
.nav_wrap ul li:nth-child(5) ul ul {
  top: 0;
  left: -100%;
}
.nav_wrap ul li:nth-child(6) ul ul {
  top: 0;
  left: -100%;
}
.nav_wrap ul li:nth-child(7) ul ul {
  top: 0;
  left: -100%;
}

/* Mobile view in Progress */

@media screen and (max-width: 700px) {
  .baz-navigation {
    width: 100%;
  }
  .menu > nav > ul {
    flex-direction: column;
  }
  .nav_wrap ul li {
    text-align: right;
  }
  .nav_wrap ul li, nav {
    width: 100%;
  }
  .nav_wrap ul ul {
    display: none;
    position: relative;
    top: 0;
    left: 0;
  }
  .nav_wrap ul li:nth-child(1) ul ul {
    top: 0;
    left: 0;
  }
  .nav_wrap ul li:nth-child(2) ul ul {
    top: 0;
    left: 0;
  }
  .nav_wrap ul li:nth-child(3) ul ul {
    top: 0;
    left: 0;
  }
  .nav_wrap ul li:nth-child(4) ul ul {
    top: 0;
    left: 0;
  }
  .nav_wrap ul li:nth-child(5) ul ul {
    top: 0;
    left: 0;
  }
  .nav_wrap ul li:nth-child(6) ul ul {
    top: 0;
    left: 0;
  }
  .nav_wrap ul li:nth-child(7) ul ul {
    top: 0;
    left: 0;
  }

  .nav_wrap ul li:hover > ul {
    display: flex;
    background-color: inherit;
    flex-direction: column;
  }
}