Generated by SassMeister.com.

SassMeister-input-HTML.html

<h1>Viget</h1>
<ul>
  <li>
    <a href="http://viget.com/about#team" class="flyout-nav">Team</a>
    <ul class="flyout">
      <li>
        <a href="http://viget.com/about/team/bwilliams">Brian W. Williams</a>
      </li>
      <li>
        <a href="http://viget.com/about/team/arankin">Andy Rankin</a>
      </li>
      <li>
        <a href="http://viget.com/about/team/ccaldwell">Cindy Caldwell</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="http://viget.com/work">Work</a>
  </li>
  <li>
    <a href="http://viget.com/blogs" class="flyout-nav">Blogs</a>
    <ul class="flyout">
      <li>
        <a href="http://viget.com/advance">Advance</a>
      </li>
      <li>
        <a href="http://viget.com/inspire">Inspire</a>
      </li>
      <li>
        <a href="http://viget.com/extend">Extend</a>
      </li>
      <li>
        <a href="http://viget.com/flourish">Flourish</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="http://viget.com/contact">Contact</a>
  </li>
</ul>

SassMeister-input.scss

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

html {
  font-family: 'Arial', sans-serif;
  font-size: 18px;
}

ul {
  background: #f2f2f2;
  display: inline-block;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

a {
  color: #082b3b;
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  
  &:hover,
  &:focus {
    color: #1496bb;
    text-decoration: underline;
    
    + .flyout {
      display: block;
    }
  }
}

.flyout-nav {
  padding-right: 40px;
  
  &:after {
    content: ">";
    color: #ccc;
    position: absolute;
    margin-top: 1px;
    right: 10px;
  }
  
  &:hover,
  &:focus {
    &:after {
      color: #1496bb;
    }
  }
}

.flyout {
  display: none;
  min-height: 100%;
  position: absolute;
  left: 100%;
  top: 0;
  
  &:hover {
    display: block;
  }
  
  li {
    border: none;
  }
}

SassMeister-output.css

html {
  font-family: 'Arial', sans-serif;
  font-size: 18px;
}

ul {
  background: #f2f2f2;
  display: inline-block;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

a {
  color: #082b3b;
  display: block;
  padding: 10px 20px;
  text-decoration: none;
}
a:hover, a:focus {
  color: #1496bb;
  text-decoration: underline;
}
a:hover + .flyout, a:focus + .flyout {
  display: block;
}

.flyout-nav {
  padding-right: 40px;
}
.flyout-nav:after {
  content: ">";
  color: #ccc;
  position: absolute;
  margin-top: 1px;
  right: 10px;
}
.flyout-nav:hover:after, .flyout-nav:focus:after {
  color: #1496bb;
}

.flyout {
  display: none;
  min-height: 100%;
  position: absolute;
  left: 100%;
  top: 0;
}
.flyout:hover {
  display: block;
}
.flyout li {
  border: none;
}

SassMeister-rendered.html

<h1>Viget</h1>
<ul>
  <li>
    <a href="http://viget.com/about#team" class="flyout-nav">Team</a>
    <ul class="flyout">
      <li>
        <a href="http://viget.com/about/team/bwilliams">Brian W. Williams</a>
      </li>
      <li>
        <a href="http://viget.com/about/team/arankin">Andy Rankin</a>
      </li>
      <li>
        <a href="http://viget.com/about/team/ccaldwell">Cindy Caldwell</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="http://viget.com/work">Work</a>
  </li>
  <li>
    <a href="http://viget.com/blogs" class="flyout-nav">Blogs</a>
    <ul class="flyout">
      <li>
        <a href="http://viget.com/advance">Advance</a>
      </li>
      <li>
        <a href="http://viget.com/inspire">Inspire</a>
      </li>
      <li>
        <a href="http://viget.com/extend">Extend</a>
      </li>
      <li>
        <a href="http://viget.com/flourish">Flourish</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="http://viget.com/contact">Contact</a>
  </li>
</ul>