diff --git a/static/css/application.css b/static/css/application.css
index 2f21bf7b48..7de060efb7 100644
--- a/static/css/application.css
+++ b/static/css/application.css
@@ -3567,19 +3567,15 @@ div.course-wrapper.closed section.course-content div.video-subtitles ol.subtitle
   max-height: 577px; }
 
 nav.sequence-nav {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  margin-bottom: 22.652px;
-  position: relative;
-  top: -1px; }
-nav.sequence-nav ol {
   border-bottom: 1px solid #e4d080;
-  border-top: 1px solid #e4d080;
+  margin-bottom: 22.652px;
+  position: relative; }
+nav.sequence-nav ol {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   display: table;
+  height: 100%;
   padding-right: 8.696%;
   width: 100%; }
 nav.sequence-nav ol li {
@@ -3617,6 +3613,7 @@ nav.sequence-nav ol li a {
   display: block;
   height: 17px;
   padding: 15px 0 14px;
+  position: relative;
   -webkit-transition-property: all;
   -moz-transition-property: all;
   -ms-transition-property: all;
@@ -3665,25 +3662,27 @@ nav.sequence-nav ol li a.seq_vertical_visited, nav.sequence-nav ol li a.seq_prob
 nav.sequence-nav ol li a.seq_vertical_active, nav.sequence-nav ol li a.seq_problem_active {
   background-image: url("/static/images/sequence-nav/list-icon-current.png");
   background-position: center; }
-nav.sequence-nav ol li p {
+nav.sequence-nav ol li a p {
   background: #333;
   color: #fff;
+  display: none;
   line-height: 22.652px;
-  margin: 0px 0 0 -5px;
+  left: 0px;
   opacity: 0;
   padding: 6px;
   position: absolute;
+  top: 48px;
   text-shadow: 0 -1px 0 black;
   -webkit-transition-property: all;
   -moz-transition-property: all;
   -ms-transition-property: all;
   -o-transition-property: all;
   transition-property: all;
-  -webkit-transition-duration: 0.6s;
-  -moz-transition-duration: 0.6s;
-  -ms-transition-duration: 0.6s;
-  -o-transition-duration: 0.6s;
-  transition-duration: 0.6s;
+  -webkit-transition-duration: 0.1s;
+  -moz-transition-duration: 0.1s;
+  -ms-transition-duration: 0.1s;
+  -o-transition-duration: 0.1s;
+  transition-duration: 0.1s;
   -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
   -moz-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
   -ms-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
@@ -3694,16 +3693,13 @@ nav.sequence-nav ol li p {
   -ms-transition-delay: 0;
   -o-transition-delay: 0;
   transition-delay: 0;
-  white-space: pre-wrap;
+  white-space: pre;
   z-index: 99; }
-nav.sequence-nav ol li p.shown {
-  margin-top: 4px;
-  opacity: 1; }
-nav.sequence-nav ol li p:empty {
+nav.sequence-nav ol li a p:empty {
   background: none; }
-nav.sequence-nav ol li p:empty::after {
+nav.sequence-nav ol li a p:empty::after {
   display: none; }
-nav.sequence-nav ol li p::after {
+nav.sequence-nav ol li a p::after {
   background: #333;
   content: " ";
   display: block;
@@ -3717,9 +3713,13 @@ nav.sequence-nav ol li p::after {
   -o-transform: rotate(45deg);
   transform: rotate(45deg);
   width: 10px; }
+nav.sequence-nav ol li a:hover p {
+  display: block;
+  margin-top: 4px;
+  opacity: 1; }
 nav.sequence-nav ul {
-  margin-right: 1px;
   list-style: none !important;
+  height: 100%;
   position: absolute;
   right: 0;
   top: 0;
diff --git a/templates/courseware.html b/templates/courseware.html
index 547c43e221..050172626a 100644
--- a/templates/courseware.html
+++ b/templates/courseware.html
@@ -12,10 +12,6 @@
 <script type="text/javascript">
   $(function() {
     ${init}
-
-    $(".sequence-nav li a").hover(function(){
-      $(this).siblings().toggleClass("shown");
-      });
   });
 </script>
 </%block>
diff --git a/templates/sass/courseware/_sequence-nav.scss b/templates/sass/courseware/_sequence-nav.scss
index 788db0518f..8684494d9d 100644
--- a/templates/sass/courseware/_sequence-nav.scss
+++ b/templates/sass/courseware/_sequence-nav.scss
@@ -1,15 +1,13 @@
 nav.sequence-nav {
   @extend .topbar;
-  @include box-sizing(border-box);
+  border-bottom: 1px solid darken($cream, 20%);
   margin-bottom: $body-line-height;
   position: relative;
-  top: -1px;
 
   ol {
-    border-bottom: 1px solid darken($cream, 20%);
-    border-top: 1px solid darken($cream, 20%);
     @include box-sizing(border-box);
     display: table;
+    height: 100%;
     padding-right: flex-grid(1, 9);
     width: 100%;
 
@@ -63,117 +61,117 @@ nav.sequence-nav {
         display: block;
         height: 17px;
         padding: 15px 0 14px;
+        position: relative;
         @include transition(all, .4s, $ease-in-out-quad);
         width: 100%;
 
-        // @media screen and (max-width: 800px) {
-          //   padding: 12px 8px;
-          // }
-
-          //video
-          &.seq_video_inactive {
-            @extend .inactive;
-            background-image: url('/static/images/sequence-nav/video-icon-normal.png');
-            background-position: center;
-          }
-
-          &.seq_video_visited {
-            @extend .visited;
-            background-image: url('/static/images/sequence-nav/video-icon-visited.png');
-            background-position: center;
-          }
-
-          &.seq_video_active {
-            @extend .active;
-            background-image: url('/static/images/sequence-nav/video-icon-current.png');
-            background-position: center;
-          }
-
-          //other
-          &.seq_other_inactive {
-            @extend .inactive;
-            background-image: url('/static/images/sequence-nav/document-icon-normal.png');
-            background-position: center;
-          }
-
-          &.seq_other_visited {
-            @extend .visited;
-            background-image: url('/static/images/sequence-nav/document-icon-visited.png');
-            background-position: center;
-          }
-
-          &.seq_other_active {
-            @extend .active;
-            background-image: url('/static/images/sequence-nav/document-icon-current.png');
-            background-position: center;
-          }
-
-          //vertical & problems
-          &.seq_vertical_inactive, &.seq_problem_inactive {
-            @extend .inactive;
-            background-image: url('/static/images/sequence-nav/list-icon-normal.png');
-            background-position: center;
-          }
-
-          &.seq_vertical_visited, &.seq_problem_visited {
-            @extend .visited;
-            background-image: url('/static/images/sequence-nav/list-icon-visited.png');
-            background-position: center;
-          }
-
-          &.seq_vertical_active, &.seq_problem_active {
-            @extend .active;
-            background-image: url('/static/images/sequence-nav/list-icon-current.png');
-            background-position: center;
-          }
+        //video
+        &.seq_video_inactive {
+          @extend .inactive;
+          background-image: url('/static/images/sequence-nav/video-icon-normal.png');
+          background-position: center;
         }
 
-      p {
-        // display: none;
-        // visibility: hidden;
-        background: #333;
-        color: #fff;
-        line-height: lh();
-        margin: 0px 0 0 -5px;
-        opacity: 0;
-        padding: 6px;
-        position: absolute;
-        text-shadow: 0 -1px 0 #000;
-        @include transition(all, .6s, $ease-in-out-quart);
-        white-space: pre-wrap;
-        z-index: 99;
-
-        &.shown {
-          margin-top: 4px;
-          opacity: 1;
+        &.seq_video_visited {
+          @extend .visited;
+          background-image: url('/static/images/sequence-nav/video-icon-visited.png');
+          background-position: center;
         }
 
-        &:empty {
-          background: none;
+        &.seq_video_active {
+          @extend .active;
+          background-image: url('/static/images/sequence-nav/video-icon-current.png');
+          background-position: center;
+        }
+
+        //other
+        &.seq_other_inactive {
+          @extend .inactive;
+          background-image: url('/static/images/sequence-nav/document-icon-normal.png');
+          background-position: center;
+        }
+
+        &.seq_other_visited {
+          @extend .visited;
+          background-image: url('/static/images/sequence-nav/document-icon-visited.png');
+          background-position: center;
+        }
+
+        &.seq_other_active {
+          @extend .active;
+          background-image: url('/static/images/sequence-nav/document-icon-current.png');
+          background-position: center;
+        }
+
+        //vertical & problems
+        &.seq_vertical_inactive, &.seq_problem_inactive {
+          @extend .inactive;
+          background-image: url('/static/images/sequence-nav/list-icon-normal.png');
+          background-position: center;
+        }
+
+        &.seq_vertical_visited, &.seq_problem_visited {
+          @extend .visited;
+          background-image: url('/static/images/sequence-nav/list-icon-visited.png');
+          background-position: center;
+        }
+
+        &.seq_vertical_active, &.seq_problem_active {
+          @extend .active;
+          background-image: url('/static/images/sequence-nav/list-icon-current.png');
+          background-position: center;
+        }
+
+       p {
+          background: #333;
+          color: #fff;
+          display: none;
+          line-height: lh();
+          left: 0px;
+          opacity: 0;
+          padding: 6px;
+          position: absolute;
+          top: 48px;
+          text-shadow: 0 -1px 0 #000;
+          @include transition(all, .1s, $ease-in-out-quart);
+          white-space: pre;
+          z-index: 99;
+
+          &:empty {
+            background: none;
+
+            &::after {
+              display: none;
+            }
+          }
 
           &::after {
-            display: none;
+            background: #333;
+            content: " ";
+            display: block;
+            height: 10px;
+            left: 18px;
+            position: absolute;
+            top: -5px;
+            @include transform(rotate(45deg));
+            width: 10px;
           }
         }
 
-        &::after {
-          background: #333;
-          content: " ";
-          display: block;
-          height: 10px;
-          left: 18px;
-          position: absolute;
-          top: -5px;
-          @include transform(rotate(45deg));
-          width: 10px;
+        &:hover {
+          p {
+            display: block;
+            margin-top: 4px;
+            opacity: 1;
+          }
         }
       }
     }
   }
 
   ul {
-    margin-right: 1px;
     list-style: none !important;
+    height: 100%;
     position: absolute;
     right: 0;
     top: 0;
diff --git a/templates/seq_module.js b/templates/seq_module.js
index afa2fffea1..5fa4070fca 100644
--- a/templates/seq_module.js
+++ b/templates/seq_module.js
@@ -2,7 +2,7 @@
 
 var ${ id }contents=["",
  %for t in items:
- ${t['content']} , 
+ ${t['content']} ,
  %endfor
  ""
        ];
@@ -16,7 +16,7 @@ var ${ id }types=["",
 
 var ${ id }init_functions=["",
  %for t in items:
-	       function(){ ${t['init_js']} }, 
+	       function(){ ${t['init_js']} },
  %endfor
 	       ""];
 
@@ -24,12 +24,12 @@ var ${ id }titles=${titles};
 
 var ${ id }destroy_functions=["",
  %for t in items:
-	       function(){ ${t['destroy_js']} }, 
+	       function(){ ${t['destroy_js']} },
  %endfor
 	       ""];
 
 var ${ id }loc = -1;
-function disablePrev() { 
+function disablePrev() {
     var i=${ id }loc-1;
     log_event("seq_prev", {'old':${id}loc, 'new':i,'id':'${id}'});
     if (i < 1 ) {
@@ -39,7 +39,7 @@ function disablePrev() {
     };
   }
 
-  function disableNext() { 
+  function disableNext() {
     var i=${ id }loc+1;
     log_event("seq_next", {'old':${id}loc, 'new':i,'id':'${id}'});
 
@@ -77,11 +77,11 @@ function ${ id }goto(i) {
 function ${ id }setup_click(i) {
         $('#tt_'+i).click(function(eo) { ${ id }goto(i);});
 	$('#tt_'+i).addClass("seq_"+${ id }types[i]+"_inactive");
-	$('#tt_'+i).parent().append("<p>" + ${ id }titles[i-1] + "</p>");
+	$('#tt_'+i).append("<p>" + ${ id }titles[i-1] + "</p>");
 
 }
 
-function ${ id }next() { 
+function ${ id }next() {
     var i=${ id }loc+1;
     log_event("seq_next", {'old':${id}loc, 'new':i,'id':'${id}'});
     if(i > ${ len(items) } ) {
@@ -92,7 +92,7 @@ function ${ id }next() {
 }
 
 
-function ${ id }prev() { 
+function ${ id }prev() {
     var i=${ id }loc-1;
     log_event("seq_prev", {'old':${id}loc, 'new':i,'id':'${id}'});
     if (i < 1 ) {
@@ -105,7 +105,7 @@ function ${ id }prev() {
 
 
 $(function() {
-  var i; 
+  var i;
   for(i=1; i<${ len(items)+1 }; i++) {
     ${ id }setup_click(i);
   }