studio - revises studio nav visually and adds help links

cms/static/sass/elements/_navigation.scss

@@ -32,11 +32,147 @@ nav {
     }
 
     .icon-caret-down {
+      // @include transition(rotate .15s ease-in-out .25s);
       margin-left: ($baseline/10);
+
+      &:hover {
+        @include transform(rotate(180deg));
+      }
+    }
+
+    // dropped down state
+    &.is-selected {
+
+      .icon-caret-down {
+        @include transform(rotate(180deg));
+      }
+    }
+  }
+
+  .nav-item {
+    position: relative;
+
+    &:hover {
+
     }
   }
 
   .wrapper-nav-sub {
-    display: none !important;
+    @include transition (opacity 1.0s ease-in-out 0s);
+    position: absolute;
+    top: ($baseline*2.5);
+    opacity: 0.0;
+    pointer-events: none;
+    width: ($baseline*8);
+
+
+    // dropped down state
+    &.is-shown {
+      opacity: 1.0;
+      pointer-events: auto;
+    }
+  }
+
+  .nav-sub {
+    @include border-radius(2px);
+    @include box-sizing(border-box);
+    @include box-shadow(0 1px 1px $shadow-l1);
+    position: relative;
+    width: 100%;
+    border: 1px solid $gray-l3;
+    padding: ($baseline/2) ($baseline*0.75);
+    background: $white;
+
+    &:after, &:before {
+      bottom: 100%;
+      border: solid transparent;
+      content: " ";
+      height: 0;
+      width: 0;
+      position: absolute;
+      pointer-events: none;
+    }
+
+    // ui triangle/nub
+    &:after {
+      border-color: rgba(255, 255, 255, 0);
+      border-bottom-color: $white;
+      border-width: 10px;
+    }
+
+    &:before {
+      border-color: rgba(178, 178, 178, 0);
+      border-bottom-color: $gray-l3;
+      border-width: 11px;
+    }
+
+    .nav-item {
+      @extend .t-action3;
+      display: block;
+      margin: 0 0 ($baseline/4) 0;
+      border-bottom: 1px solid $gray-l5;
+      padding: 0 0($baseline/4) 0;
+      font-weight: 500;
+
+      &:last-child {
+        margin-bottom: 0;
+        border-bottom: none;
+        padding-bottom: 0;
+      }
+
+      a {
+        display: block;
+
+        &:hover, &:active {
+          color: $blue-s1;
+        }
+      }
+    }
+  }
+
+  // CASE: left-hand side arrow/dd
+  &.ui-left {
+
+    .wrapper-nav-sub {
+      left: 0;
+    }
+
+    .nav-sub {
+      text-align: left;
+
+      // ui triangle/nub
+      &:after {
+        left: $baseline;
+        margin-left: -10px;
+      }
+
+      &:before {
+        left: $baseline;
+        margin-left: -11px;
+      }
+    }
+  }
+
+  // CASE: right-hand side arrow/dd
+  &.ui-right {
+
+    .wrapper-nav-sub {
+      left: none;
+      right: 0;
+    }
+
+    .nav-sub {
+
+      // ui triangle/nub
+      &:after {
+        right: $baseline;
+        margin-right: -10px;
+      }
+
+      &:before {
+        right: $baseline;
+        margin-right: -11px;
+      }
+    }
   }
 }