<section class="main-wrapper">
  <nav class="main-nav" role="navigation">
    <a class="nav-item" href="#">Home</a>
    <a class="nav-item" href="#">Stuff</a>
    <span class="subnav">
      Subnavs here
      <nav class="sub-navigation" role="sub-navigation">
        <a class="subnav-item" href="#">Things</a>
        <a class="subnav-item" href="#">Sub stuf</a>
        <a class="subnav-item" href="#">more</a>
      </nav>
    </span>
    <a class="nav-item" href="#">Contact Us</a>
  </nav>
</section>

body {
  color: #BADA44;
  background: #4e4e4e;
  
  font-size: 1.3em;
  font-family: 'Myriad Pro', 'Sans Serif', Arial;
  
  box-sizing: border-box;
  margin: 0
}

a {  
  color: inherit;
  text-decoration: none;
}

.main-nav, .sub-navigation {
  background: #3D3D3D;
}

.nav-item, .subnav {
  padding: 10px;
}

.subnav-item {
  padding: 4px 20px;
}

.nav-item:hover, .subnav-item:hover {
  background: #232323;
  color: #EFEFEF;
}

.main-wrapper {
  background: #1F1F1F;
  
  width: 80%;
  max-width: 1000px;
  height: 100%;
  
  position: absolute;
  left: 10%
}

.subnav {
  postion: relative;
  display: inline-block;
}

.subnav-item {
  display: block;
}

.subnav nav {
  display: none;
  position: absolute;
}

.subnav:hover nav {
  display: block;
}