diff --git a/cms/static/js/base.js b/cms/static/js/base.js
index 776d42d1cf..8902198b8b 100644
--- a/cms/static/js/base.js
+++ b/cms/static/js/base.js
@@ -44,7 +44,7 @@ $(document).ready(function() {
 
     $('.nav-dropdown .nav-item .title').click(function(e){
 
-        $subnav = $(this).parent().find('.nav-sub');
+        $subnav = $(this).parent().find('.wrapper-nav-sub');
         $title = $(this).parent().find('.title');
 
         e.preventDefault();
diff --git a/cms/static/sass/_header.scss b/cms/static/sass/_header.scss
index a9af94e79f..241eacd109 100644
--- a/cms/static/sass/_header.scss
+++ b/cms/static/sass/_header.scss
@@ -198,7 +198,7 @@ nav .nav-item {
 // specific elements - account-based nav
 .nav-account {
   width: 100%;
-  margin-top: 10px;
+  margin-top: ($baseline*0.75);
   @include font-size(14);
   text-align: right;
 
@@ -235,16 +235,49 @@ nav .nav-item {
     }
   }
 
+  .wrapper-nav-sub {
+    position: absolute;
+    left: -7px;
+    top: 47px;
+    width: 140px;
+  }
+
   .nav-sub {
     @include border-radius(2px);
-    position: absolute;
-    top: 30px;
-    width: 125px;
+    @include box-sizing(border-box);
+    @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1));
+    position: relative;
+    width: 100%;
     border: 1px solid $gray-l2;
     padding: ($baseline/4) ($baseline/2);
-    @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1));
     background: $white;
 
+    &:after, &:before {
+      bottom: 100%;
+      border: solid transparent;
+      content: " ";
+      height: 0;
+      width: 0;
+      position: absolute;
+      pointer-events: none;
+    }
+
+    &:after {
+      border-color: rgba(255, 255, 255, 0);
+      border-bottom-color: #fff;
+      border-width: 5px;
+      right: ($baseline/4);
+      margin-left: -5px;
+    }
+
+    &:before {
+      border-color: rgba(178, 178, 178, 0);
+      border-bottom-color: $gray-l2;
+      border-width: 6px;
+      right: ($baseline/4);
+      margin-left: -6px;
+    }
+
     .nav-item {
       display: block;
       margin: 0 0 ($baseline/4) 0;
@@ -262,85 +295,70 @@ nav .nav-item {
         display: block;
       }
     }
-
-    // arrows
-    &:after, &:before {
-
-    }
-
-    &:after {
-
-    }
-
-    &:before {
-
-    }
-  }
-
-  // UI - dropdown - vendor
-  .arrow_box {
-    position: relative;
-    background: #fff;
-    border: 1px solid #a1a1a1;
-  }
-  .arrow_box:after, .arrow_box:before {
-    bottom: 100%;
-    border: solid transparent;
-    content: " ";
-    height: 0;
-    width: 0;
-    position: absolute;
-    pointer-events: none;
-  }
-
-  .arrow_box:after {
-    border-color: rgba(255, 255, 255, 0);
-    border-bottom-color: #fff;
-    border-width: 10px;
-    left: 50%;
-    margin-left: -10px;
-  }
-  .arrow_box:before {
-    border-color: rgba(161, 161, 161, 0);
-    border-bottom-color: #a1a1a1;
-    border-width: 11px;
-    left: 50%;
-    margin-left: -11px;
   }
 
   // UI - dropdown - specific navs
   &.nav-account {
 
+    .wrapper-nav-sub {
+      top: 27px;
+      left: auto;
+      right: -($baseline/2);
+      width: 110px;
+    }
+
     .nav-sub {
-      right: 0;
       text-align: left;
     }
+
+    .nav-sub:after {
+      left: auto;
+      right: 10px;
+    }
+
+    .nav-sub:before {
+      left: auto;
+      right: 9px;
+    }
   }
 
   &.nav-course {
 
-    .nav-sub {
-      left: -5px;
-    }
-
     .nav-course-courseware {
 
-      .nav-sub {
-        top: 50px;
+      .nav-sub:after {
+        left: 86px;
+      }
+
+      .nav-sub:before {
+        left: 86px;
       }
     }
 
     .nav-course-settings {
 
-      .nav-sub {
-        top: 50px;
+      .nav-sub:after {
+        left: 86px;
+      }
+
+      .nav-sub:before {
+        left: 86px;
       }
     }
 
     .nav-course-tools {
 
-      .nav-sub {
-      
+      .wrapper-nav-sub {
+        top: ($baseline*1.5);
+        width: 100px;
+      }
+
+      .nav-sub:after {
+        left: 66px;
+      }
+
+      .nav-sub:before {
+        left: 66px;
       }
     }
   }
@@ -461,7 +479,7 @@ body.course.outline .nav-course-courseware
     }
   }
 
-  .nav-sub {
+  .wrapper-nav-sub {
     @include transition (opacity 1.0s ease-in-out 0s);
     opacity: 0;
     pointer-events: none;
diff --git a/cms/templates/widgets/header.html b/cms/templates/widgets/header.html
index 993f2d7cd9..c33e75d2bb 100644
--- a/cms/templates/widgets/header.html
+++ b/cms/templates/widgets/header.html
@@ -23,37 +23,43 @@
           <li class="nav-item nav-course-courseware">
             <h3 class="title"><span class="label-prefix">Course </span>Content <i class="ss-icon ss-symbolicons-block icon-expand">&#x25BE;</i></h3>
             
-            <div class="nav-sub">
-              <ul>
-                <li class="nav-item"><a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Outline</a></li>
-                <li class="nav-item"><a href="${reverse('course_info', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Updates</a></li>
-                <li class="nav-item"><a href="${reverse('edit_tabs', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, coursename=ctx_loc.name))}">Pages/Tabs</a></li>
-                <li class="nav-item"><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Files &amp; Uploads</a></li>
-              </ul>
-            </div>
+            <div class="wrapper wrapper-nav-sub">
+              <div class="nav-sub">
+                <ul>
+                  <li class="nav-item"><a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Outline</a></li>
+                  <li class="nav-item"><a href="${reverse('course_info', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Updates</a></li>
+                  <li class="nav-item"><a href="${reverse('edit_tabs', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, coursename=ctx_loc.name))}">Pages/Tabs</a></li>
+                  <li class="nav-item"><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Files &amp; Uploads</a></li>
+                </ul>
+              </div>
+            </div>            
           </li>
 
           <li class="nav-item nav-course-settings">
             <h3 class="title"><span class="label-prefix">Course </span>Settings <i class="ss-icon ss-symbolicons-block icon-expand">&#x25BE;</i></h3>
             
-            <div class="nav-sub">
-              <ul>
-                <li class="nav-item"><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Schedule &amp; Details</a></li>
-                <li class="nav-item"><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Grading</a></li>
-                <li class="nav-item"><a href="${reverse('manage_users', kwargs=dict(location=ctx_loc))}">Course Team</a></li>
-                <li class="nav-item"><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Advanced Settings</a></li>
-              </ul>
-            </div>
+            <div class="wrapper wrapper-nav-sub">
+              <div class="nav-sub">
+                <ul>
+                  <li class="nav-item"><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Schedule &amp; Details</a></li>
+                  <li class="nav-item"><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Grading</a></li>
+                  <li class="nav-item"><a href="${reverse('manage_users', kwargs=dict(location=ctx_loc))}">Course Team</a></li>
+                  <li class="nav-item"><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Advanced Settings</a></li>
+                </ul>
+              </div>
+            </div>            
           </li>
 
           <li class="nav-item nav-course-tools">
             <h3 class="title">Tools <i class="ss-icon ss-symbolicons-block icon-expand">&#x25BE;</i></h3>
             
-            <div class="nav-sub">
-              <ul>
-                <li class="nav-item"><a href="${reverse('import_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Import</a></li>
-                <li class="nav-item"><a href="${reverse('export_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Export</a></li>
-              </ul>
+            <div class="wrapper wrapper-nav-sub">
+              <div class="nav-sub">
+                <ul>
+                  <li class="nav-item"><a href="${reverse('import_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Import</a></li>
+                  <li class="nav-item"><a href="${reverse('export_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Export</a></li>
+                </ul>
+              </div>
             </div>
           </li>
         </ol>
@@ -75,12 +81,14 @@
               <i class="ss-icon ss-symbolicons-block icon-expand">&#x25BE;</i>
             </a>
 
-            <div class="nav-sub">
-              <ul>
-                <li class="nav-item"><a href="#">My Courses</a></li>
-                <li class="nav-item"><a href="#">Help</a></li>
-                <li class="nav-item"><a class="action action-logout" href="${reverse('logout')}">Logout</a></li>
-              </ul>
+            <div class="wrapper wrapper-nav-sub">
+              <div class="nav-sub">
+                <ul>
+                  <li class="nav-item"><a href="#">My Courses</a></li>
+                  <li class="nav-item"><a href="#">Help</a></li>
+                  <li class="nav-item"><a class="action action-logout" href="${reverse('logout')}">Logout</a></li>
+                </ul>
+              </div>
             </div>
           </li>
         </ol>