ul {
  margin-bottom: 1.5em;
  margin-left: 1.5em;
}
a {
  text-decoration: none;
}

.nav {
  list-style: none;
  margin-left: 0;
}
.nav > li,
.nav > li > a {
  display: inline-block;
  *display: inline;
  zoom: 1;
}

.stacked > li {
  display: list-item;
}
.stacked > li > a {
  display: block;
}

/*------------------------------------*\
      $FLYOUT
  \*------------------------------------*/
/**
   * Flyouts are pieces of content that fly out of a parent when said parent is hovered.
   * They typically appear bottom-left of the parent.
     <div class=flyout>
         Foo
         <div class=flyout-content>
             <h1>Lorem</h1>
             <p>Ipsum</p>
         </div>
     </div>
   */
.flyout,
.flyout-alt {
  position: relative;
}
.flyout-content {
  /* Position the flyouts off-screen. This is typically better than `display:none;`. */
  position: absolute;
  top: 100%;
  left: -99999px;
  /**
           * Even though they are out of document flow, lots of nested flyouts can
           * eventually force scroll bars to appear as they become taller than the viewport.
           * We can undo this effect by giving them zero height.
           */
  height: 0;
  overflow: hidden;
}

/**
       * Bring the flyouts into view when you hover their parents.
       * Two different types of flyout; ‘regular’ (`.flyout`) and ‘alternative’ (`.flyout-alt`).
       */
/* Regular flyouts sit all the way from the top, flush left. */
.flyout:hover > .flyout-content {
  left: 0;
}
/* Alternative flyouts sit all the way from the left, flush top. */
.flyout-alt:hover > .flyout-content {
  top: 0;
  left: 100%;
}
.flyout:hover > .flyout-content,
.flyout-alt:hover > .flyout-content {
  /* Give the flyouts their height back once they come into view. */
  height: auto;
  overflow: visible;
}

/*------------------------------------*\
      $SITE-NAV
  \*------------------------------------*/
/**
   * Site nav specific styling.
   * Extends `.nav{}`
   */
.site-nav {
  font-size: 0.75em;
  font-family: sans-serif;
}
.site-nav a {
  line-height: 1;
  padding: 1em;
  background-color: #09f;
  color: #fff;
  white-space: nowrap;
}

/*--- SITE-NAV FLYOUTS ---*/
/**
   * Site nav specific flyouts, extension of `.flyout`.
   * Set up some styles to apply and persist when we hover things in the site nav.
   * This allows us to keep parents highlighted as we hover their contained flyouts [1].
   */
.site-nav .flyout:hover > a /* [1] */,
  .site-nav .flyout-alt:hover > a /* [1] */,
  .site-nav a:hover {
  color: #435704;
  background-color: #bada55;
}

/**
   * Add an indicator to any flyout parents in the site nav to show there’s a flyout.
   */
.site-nav .flyout-alt > a:after {
  content: " »";
}

/**
   * Here we set up a load of shared borders on the site-nav specific flyouts.
   * The code looks a little scattered but it allows us to cleverly share declarations:
   * We set up a non-existent [1] solid [2] border on all sides of the relevant elements.
   * We can now also change the style [2] and colour [3] of all borders in one go.
   * Now we have set up border colours and styles, we need to just turn the desired borders ‘on’ [4].
   */
.site-nav a,
.site-nav .flyout-content {
  border: 0 /* [1] */ solid /* [2] */ #fff /* [3] */;
}
.site-nav > li > a {
  border-left-width: 1px; /* [4] */
}
/* The first link in the site-nav doesn’t require a border at all. */
.site-nav > li:first-child > a {
  border: none;
}
.site-nav .flyout-content {
  border-width: 1px 0 0 1px; /* [4] */
}
.site-nav .flyout-content a {
  border-bottom-width: 1px; /* [4] */
}
.site-nav .flyout-alt:hover > .flyout-content {
  /**
       * To account for the 1px top border on the flyout containers, we need to
       * bring the flyouts back up by 1px in this special instance.
       */
  top: -1px;
}