Navigation with Flexbox

SassMeister-input-HTML.html

<header class="top-bar">
  <nav>
    <ul class="nav">
      <li class="nav-item"><a href="#">Home<span class="nav-subtitle">the beginning</span></a></li>
      <li class="nav-item">
        <a href="#">Portfolio<span class="nav-subtitle">my work</span></a>
        <ul class="nav-submenu">
          <li class="nav-subitem"><a href="#">Print Design</a></li>
          <li class="nav-subitem"><a href="#">Web Design</a></li>
          <li class="nav-subitem"><a href="#">Development</a></li>
          <li class="nav-subitem"><a href="#">Branding</a>
            <ul>
              <li class="nav-subitem"><a href="#">Logo</a></li>
              <li class="nav-subitem"><a href="#">Marketing</a></li>
              <li class="nav-subitem"><a href="#">Stationary</a></li>
            </ul>
          </li>
          <li class="nav-subitem"><a href="#">Copywriting</a></li>
        </ul>
      </li>
      <li class="nav-item"><a href="#">Contact<span class="nav-subtitle">say hi</span></a></li>
      <li class="nav-item"><a href="#">About<span class="nav-subtitle">my story</span></a></li>
    </ul>
  </nav>
</header>

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----

// see http://www.mina.is/speaking/smacss-sass/menu.html

// normally, variables and mixins are put in a separate partial

$fix-mqs          : false !default;
$old-ie           : false !default;
$color-primary    : #f37;
$black            : #000;   
$white            : #fff;

@mixin mq($breakpoint, $query: 'min-width', $type: 'screen') { // breakpoint can be a variable
  // if media queries are not supported
  @if $fix-mqs {
    @if $fix-mqs >= $breakpoint { // ...and if the fixed breakpoint is greater than query...
      @content; // ...output the content the user gave us.
    }
  }
  // Otherwise, output it using a regular media query
  @else {
    @media #{$type} and (#{$query}: #{$breakpoint}) { @content; }
  }
 }

%cf {
  zoom: 1;
  &:after,
  &:before {
    content: '';
    display: table;
  }
  &:after {
    clear: both;
  }
}

* {margin: 0;padding: 0;}

.top-bar {
  background: linear-gradient(to left,rgba(lighten($color-primary, 10),0.96) 0,rgba($color-primary,0.96) 100%);
  border-bottom: 1px solid rgba($black,.1);
  box-shadow: 0 1px 1px 0 rgba($black,.1);
  display: block;
  width: 42%;
  margin-right: 5%;
  z-index: 1000;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1.05em;
  font-weight: 400;
  line-height: 1.6rem;
  float: left;
  @extend %cf;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  list-style: none;
  
  &-item {
    flex: 0 1 auto;
    position: relative;
    transition: all linear 0.1s;
    &:hover {
      background: $color-primary;
      .nav-submenu {display: block;}
    }  
    > a {
      color: $white;
      display: block;
      font-size: 1.55rem;
      font-weight: 200;
      letter-spacing: 1px;
      max-width: 135px;
      padding: 1rem 1.5rem;
      text-decoration: none;
      text-shadow: 0 1px 1px rgba($black,.1);
      transition: all linear 0.1s;
    }
    @include mq(990px) {
      max-width: 500px;
      font-size: 1.7rem;
      line-height: 2rem;
    }
  }

  &-submenu {
    background: linear-gradient(to bottom,$color-primary 0,rgba(lighten($color-primary, 10),0.96) 100%);
    border-radius: 0 0 2px 2px;
    box-shadow: 0 3px 1px rgba($black,.05);
    display: none;
    font-size: 1rem;
    position: absolute;
    width: 195px;
    list-style-type: none; 
  }

  &-subitem {
    &:hover {
      > a {
        background-color: rgba($black,.15);  
      }
      > ul { 
        display: block;
        background: linear-gradient(to bottom,rgba($color-primary,1) 0,rgba(lighten($color-primary, 10),0.96) 100%);
        border-radius: 0 0 2px 2px;
        box-shadow: 0 3px 1px rgba($black,.05);
        font-size: 1rem;
        position: absolute;
        width: 195px;
        left: 195px;
        top: 120px;
      }
    }
    > a {
      color: rgba($white,.9);
      display: block; 
      font-size: .75rem;
      letter-spacing: 1.5px;
      padding: .25rem 1.5rem;
      text-decoration: none;
      text-transform: uppercase;
    }
    > ul { display: none; list-style-type: none;  }
  }

  &-subtitle {
    color: rgba($white,.75);
    display: block;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: .7rem; 
    font-style: italic;
    line-height: 1rem;
    max-width: 260px;
    @include mq(990px) { margin: 4px 0 0; }
  }

}

SassMeister-output.css

.top-bar {
  zoom: 1;
}
.top-bar:after, .top-bar:before {
  content: '';
  display: table;
}
.top-bar:after {
  clear: both;
}

* {
  margin: 0;
  padding: 0;
}

.top-bar {
  background: linear-gradient(to left, rgba(255, 102, 153, 0.96) 0, rgba(255, 51, 119, 0.96) 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
  display: block;
  width: 42%;
  margin-right: 5%;
  z-index: 1000;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1.05em;
  font-weight: 400;
  line-height: 1.6rem;
  float: left;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  list-style: none;
}
.nav-item {
  flex: 0 1 auto;
  position: relative;
  transition: all linear 0.1s;
}
.nav-item:hover {
  background: #ff3377;
}
.nav-item:hover .nav-submenu {
  display: block;
}
.nav-item > a {
  color: white;
  display: block;
  font-size: 1.55rem;
  font-weight: 200;
  letter-spacing: 1px;
  max-width: 135px;
  padding: 1rem 1.5rem;
  text-decoration: none;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  transition: all linear 0.1s;
}
@media screen and (min-width: 990px) {
  .nav-item {
    max-width: 500px;
    font-size: 1.7rem;
    line-height: 2rem;
  }
}
.nav-submenu {
  background: linear-gradient(to bottom, #ff3377 0, rgba(255, 102, 153, 0.96) 100%);
  border-radius: 0 0 2px 2px;
  box-shadow: 0 3px 1px rgba(0, 0, 0, 0.05);
  display: none;
  font-size: 1rem;
  position: absolute;
  width: 195px;
  list-style-type: none;
}
.nav-subitem:hover > a {
  background-color: rgba(0, 0, 0, 0.15);
}
.nav-subitem:hover > ul {
  display: block;
  background: linear-gradient(to bottom, #ff3377 0, rgba(255, 102, 153, 0.96) 100%);
  border-radius: 0 0 2px 2px;
  box-shadow: 0 3px 1px rgba(0, 0, 0, 0.05);
  font-size: 1rem;
  position: absolute;
  width: 195px;
  left: 195px;
  top: 120px;
}
.nav-subitem > a {
  color: rgba(255, 255, 255, 0.9);
  display: block;
  font-size: .75rem;
  letter-spacing: 1.5px;
  padding: .25rem 1.5rem;
  text-decoration: none;
  text-transform: uppercase;
}
.nav-subitem > ul {
  display: none;
  list-style-type: none;
}
.nav-subtitle {
  color: rgba(255, 255, 255, 0.75);
  display: block;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: .7rem;
  font-style: italic;
  line-height: 1rem;
  max-width: 260px;
}
@media screen and (min-width: 990px) {
  .nav-subtitle {
    margin: 4px 0 0;
  }
}

SassMeister-rendered.html

<header class="top-bar">
  <nav>
    <ul class="nav">
      <li class="nav-item"><a href="#">Home<span class="nav-subtitle">the beginning</span></a></li>
      <li class="nav-item">
        <a href="#">Portfolio<span class="nav-subtitle">my work</span></a>
        <ul class="nav-submenu">
          <li class="nav-subitem"><a href="#">Print Design</a></li>
          <li class="nav-subitem"><a href="#">Web Design</a></li>
          <li class="nav-subitem"><a href="#">Development</a></li>
          <li class="nav-subitem"><a href="#">Branding</a>
            <ul>
              <li class="nav-subitem"><a href="#">Logo</a></li>
              <li class="nav-subitem"><a href="#">Marketing</a></li>
              <li class="nav-subitem"><a href="#">Stationary</a></li>
            </ul>
          </li>
          <li class="nav-subitem"><a href="#">Copywriting</a></li>
        </ul>
      </li>
      <li class="nav-item"><a href="#">Contact<span class="nav-subtitle">say hi</span></a></li>
      <li class="nav-item"><a href="#">About<span class="nav-subtitle">my story</span></a></li>
    </ul>
  </nav>
</header>