diff --git a/app/scripts/directives/nav.js b/app/scripts/directives/nav.js
index 53dfad1953..c06055b25a 100644
--- a/app/scripts/directives/nav.js
+++ b/app/scripts/directives/nav.js
@@ -21,8 +21,8 @@ angular.module('openshiftConsole')
       templateUrl: 'views/_sidebar.html',
       controller: function($scope) {
         var path;
-        var hoverDelay = 300;
-        var hideDelay = hoverDelay + 200;
+        var hoverDelay = 200;
+        var hideDelay = hoverDelay + 100;
 
         $scope.navItems = Constants.PROJECT_NAVIGATION;
         $scope.sidebar = {};
@@ -89,6 +89,10 @@ angular.module('openshiftConsole')
         };
 
         $scope.itemClicked = function(primaryItem) {
+          // Remove `isHover` from any of the items if another primary item was
+          // activated using the keyboard.
+          clearHover();
+
           if (primaryItem.href) {
             // Make sure any secondary nav closes if a primary item with an
             // href was activated using the keyboard.
@@ -97,10 +101,6 @@ angular.module('openshiftConsole')
             return;
           }
 
-          // Remove `isHover` from any of the items if another primary item was
-          // activated using the keyboard.
-          clearHover();
-
           // Open the item regardless of whether the mouse is really over it
           // for keyboard and screen reader accessibility.
           primaryItem.isHover = true;
@@ -110,10 +110,6 @@ angular.module('openshiftConsole')
         };
 
         $scope.onMouseEnter = function(primaryItem) {
-          if (_.isEmpty(primaryItem.secondaryNavSections)) {
-            return;
-          }
-
           if (primaryItem.mouseLeaveTimeout) {
             $timeout.cancel(primaryItem.mouseLeaveTimeout);
             primaryItem.mouseLeaveTimeout = null;
@@ -122,15 +118,11 @@ angular.module('openshiftConsole')
           primaryItem.mouseEnterTimeout = $timeout(function() {
             primaryItem.isHover = true;
             primaryItem.mouseEnterTimeout = null;
-            $scope.sidebar.secondaryOpen = true;
+            $scope.sidebar.secondaryOpen = !_.isEmpty(primaryItem.secondaryNavSections);
           }, hoverDelay);
         };
 
         $scope.onMouseLeave = function(primaryItem) {
-          if (_.isEmpty(primaryItem.secondaryNavSections)) {
-            return;
-          }
-
           if (primaryItem.mouseEnterTimeout) {
             $timeout.cancel(primaryItem.mouseEnterTimeout);
             primaryItem.mouseEnterTimeout = null;
diff --git a/app/styles/_vertical-nav.less b/app/styles/_vertical-nav.less
index 60e6be3fa9..c029f91ebe 100644
--- a/app/styles/_vertical-nav.less
+++ b/app/styles/_vertical-nav.less
@@ -11,7 +11,6 @@
     display: none;
   }
   .has-project-bar & {
-    transition: width .1s ease-in-out;
     top: (@navbar-os-header-height-mobile + @project-bar-height-mobile);
     @media(min-width: @screen-sm-min) {
       display: block;
@@ -29,29 +28,31 @@
       top: 0px;
       width: 100%;
     }
-    &.active > a,
-    &:focus > a,
-    &:hover > a,
-    > a:focus,
-    > a:hover {
-      background-color: @nav-pf-vertical-active-bg-color;
-      color: @nav-pf-vertical-active-color;
-      font-weight: 300;
-      &:after,
+    // override PatternFly :hover as we don't want :hover changes
+    &:hover > a {
+      background-color: transparent;
+      color: @nav-pf-vertical-color;
       .fa,
       .pficon {
-        color: @nav-pf-vertical-active-color;
+        color: @nav-pf-vertical-icon-color;
       }
     }
-    &.active > a {
+    > a:focus,
+    &.active > a,
+    &.is-hover > a {
+      background-color: @nav-pf-vertical-active-bg-color;
+      color: @nav-pf-vertical-active-color !important;
+      &:after {
+        color: @nav-pf-vertical-active-color !important;
+      }
       .fa,
       .pficon {
-        color: @nav-pf-vertical-active-icon-color !important;
+        color: @nav-pf-vertical-active-icon-color;
       }
     }
     > a {
       font-size: @font-size-base;
-      font-weight: 300;
+      font-weight: 300 !important;
       text-decoration: none;
       @media(max-width: @screen-xs-max) {
         height: auto;
@@ -70,23 +71,35 @@
         text-decoration: none !important;
       }
     }
-    // padding aligns arrow vertically
-    &.secondary-nav-item-pf > a:after {
-      padding: 16px 0;
-      @media(max-width: @screen-xs-max) {
-        padding: 8px 0;
+    &.secondary-nav-item-pf {
+      > a:after {
+        font-size: 14px; // make right arrow size consistent with project-bar arrows
+        padding: 16px 0; // padding aligns arrow vertically
+        @media(max-width: @screen-xs-max) {
+          padding: 8px 0;
+        }
+      }
+      &.is-hover > a {
+        width: @nav-pf-vertical-width + 1; // cover .nav-pf-vertical border-right
+        z-index: @zindex-navbar-fixed + 1; // raise z-index to overlay
+        &:after {
+          color: @nav-pf-vertical-active-color;
+          right: 21px; // move 1px to offset parent width 1px increase onHover due to pf rules
+        }
       }
-    }
-    // make right arrow size consistent with project-bar arrows
-    &.secondary-nav-item-pf > a:after {
-      font-size: 14px;
     }
   }
   &.collapsed {
-    .list-group-item.secondary-nav-item-pf:hover,
-    .list-group-item.secondary-nav-item-pf.active {
-      > a:after {
-        right: 12px !important; // prevent arrow moving onHover due to pf rules
+    .list-group-item.secondary-nav-item-pf {
+      &.is-hover > a {
+        width: @nav-pf-vertical-collapsed-width + 2; // cover .nav-pf-vertical.collapsed border-right
+      }
+      &.is-hover,
+      &:hover,
+      &.active {
+        > a:after {
+          right: 12px !important; // prevent arrow moving onHover due to pf rules
+        }
       }
     }
     .nav-pf-secondary-nav {
diff --git a/dist/scripts/scripts.js b/dist/scripts/scripts.js
index 4f00cec483..c60e3b5a11 100644
--- a/dist/scripts/scripts.js
+++ b/dist/scripts/scripts.js
@@ -10507,18 +10507,18 @@ resource: e.canI.resource,
 group: e.canI.group
 }, e.canI.verb, l.projectName));
 }, l.itemClicked = function(e) {
-if (e.href) return l.nav.showMobileNav = !1, void (l.sidebar.secondaryOpen = !1);
-m(), e.isHover = !0, e.mobileSecondary = l.isMobile, l.sidebar.showMobileSecondary = l.isMobile, l.sidebar.secondaryOpen = !0;
+if (m(), e.href) return l.nav.showMobileNav = !1, void (l.sidebar.secondaryOpen = !1);
+e.isHover = !0, e.mobileSecondary = l.isMobile, l.sidebar.showMobileSecondary = l.isMobile, l.sidebar.secondaryOpen = !0;
 }, l.onMouseEnter = function(e) {
-_.isEmpty(e.secondaryNavSections) || (e.mouseLeaveTimeout && (n.cancel(e.mouseLeaveTimeout), e.mouseLeaveTimeout = null), e.mouseEnterTimeout = n(function() {
-e.isHover = !0, e.mouseEnterTimeout = null, l.sidebar.secondaryOpen = !0;
-}, 300));
+e.mouseLeaveTimeout && (n.cancel(e.mouseLeaveTimeout), e.mouseLeaveTimeout = null), e.mouseEnterTimeout = n(function() {
+e.isHover = !0, e.mouseEnterTimeout = null, l.sidebar.secondaryOpen = !_.isEmpty(e.secondaryNavSections);
+}, 200);
 }, l.onMouseLeave = function(e) {
-_.isEmpty(e.secondaryNavSections) || (e.mouseEnterTimeout && (n.cancel(e.mouseEnterTimeout), e.mouseEnterTimeout = null), e.mouseLeaveTimeout = n(function() {
+e.mouseEnterTimeout && (n.cancel(e.mouseEnterTimeout), e.mouseEnterTimeout = null), e.mouseLeaveTimeout = n(function() {
 e.isHover = !1, e.mouseLeaveTimeout = null, l.sidebar.secondaryOpen = _.some(l.navItems, function(e) {
 return e.isHover && !_.isEmpty(e.secondaryNavSections);
 });
-}, 500));
+}, 300);
 }, l.closeNav = function() {
 m(), l.nav.showMobileNav = !1, l.sidebar.secondaryOpen = !1;
 }, l.collapseMobileSecondary = function(e, t) {
diff --git a/dist/styles/main.css b/dist/styles/main.css
index dcc4455d0b..ae3fee5498 100644
--- a/dist/styles/main.css
+++ b/dist/styles/main.css
@@ -3662,6 +3662,7 @@ table.dataTable thead .sorting_asc:after{content:"\f106";top:-3px}
 }
 .nav-pf-vertical .list-group-item>a .fa,.nav-pf-vertical .list-group-item>a .glyphicon,.nav-pf-vertical .list-group-item>a .pficon{color:#72767b;float:left;font-size:21px;line-height:26px;margin-right:10px;text-align:center;width:24px}
 .nav-pf-vertical .list-group-item>a:hover{text-decoration:none}
+.nav-pf-vertical .list-group-item.active>a,.nav-pf-vertical .list-group-item:hover>a{font-weight:600}
 .nav-pf-vertical .list-group-item.active>a .fa,.nav-pf-vertical .list-group-item.active>a .glyphicon,.nav-pf-vertical .list-group-item.active>a .pficon,.nav-pf-vertical .list-group-item:hover>a .fa,.nav-pf-vertical .list-group-item:hover>a .glyphicon,.nav-pf-vertical .list-group-item:hover>a .pficon{color:#39a5dc}
 .nav-pf-vertical .list-group-item.active>a:before{background:#39a5dc;content:" ";height:100%;left:0;position:absolute;top:0;width:3px}
 .nav-pf-vertical .list-group-item.active:hover{background-color:transparent;border-color:#030303}
@@ -5760,26 +5761,31 @@ alerts+.chromeless .log-loading-msg{margin-top:130px}
 .block{display:block}
 .text-prepended-icon{align-items:baseline;display:flex}
 .nav-pf-vertical{background-color:#292e34;top:41px;z-index:990}
-.has-project-bar .nav-pf-vertical{transition:width .1s ease-in-out;top:69px}
+.has-project-bar .nav-pf-vertical{top:69px}
 @media (min-width:768px){.nav-pf-vertical{display:none}
 .has-project-bar .nav-pf-vertical{display:block;top:101px}
 }
 .nav-pf-vertical .list-group-item{border-color:#050505}
 .nav-pf-vertical .list-group-item:after{background:rgba(255,255,255,.04);content:'';display:block;height:1px;position:absolute;top:0px;width:100%}
-.nav-pf-vertical .list-group-item.active>a,.nav-pf-vertical .list-group-item:focus>a,.nav-pf-vertical .list-group-item:hover>a,.nav-pf-vertical .list-group-item>a:focus,.nav-pf-vertical .list-group-item>a:hover{background-color:#383f47;color:#fff;font-weight:300}
-.nav-pf-vertical .list-group-item.active>a .fa,.nav-pf-vertical .list-group-item.active>a .pficon,.nav-pf-vertical .list-group-item.active>a:after,.nav-pf-vertical .list-group-item:focus>a .fa,.nav-pf-vertical .list-group-item:focus>a .pficon,.nav-pf-vertical .list-group-item:focus>a:after,.nav-pf-vertical .list-group-item:hover>a .fa,.nav-pf-vertical .list-group-item:hover>a .pficon,.nav-pf-vertical .list-group-item:hover>a:after,.nav-pf-vertical .list-group-item>a:focus .fa,.nav-pf-vertical .list-group-item>a:focus .pficon,.nav-pf-vertical .list-group-item>a:focus:after,.nav-pf-vertical .list-group-item>a:hover .fa,.nav-pf-vertical .list-group-item>a:hover .pficon,.nav-pf-vertical .list-group-item>a:hover:after{color:#fff}
-.nav-pf-vertical .list-group-item.active>a .fa,.nav-pf-vertical .list-group-item.active>a .pficon{color:#39a5dc!important}
-.nav-pf-vertical .list-group-item>a{font-size:13px;font-weight:300;text-decoration:none}
+.nav-pf-vertical .list-group-item:hover>a{background-color:transparent;color:#d1d1d1}
+.nav-pf-vertical .list-group-item:hover>a .fa,.nav-pf-vertical .list-group-item:hover>a .pficon{color:#72767b}
+.nav-pf-vertical .list-group-item.active>a,.nav-pf-vertical .list-group-item.is-hover>a,.nav-pf-vertical .list-group-item>a:focus{background-color:#383f47;color:#fff!important}
+.nav-pf-vertical .list-group-item.active>a:after,.nav-pf-vertical .list-group-item.is-hover>a:after,.nav-pf-vertical .list-group-item>a:focus:after{color:#fff!important}
+.nav-pf-vertical .list-group-item.active>a .fa,.nav-pf-vertical .list-group-item.active>a .pficon,.nav-pf-vertical .list-group-item.is-hover>a .fa,.nav-pf-vertical .list-group-item.is-hover>a .pficon,.nav-pf-vertical .list-group-item>a:focus .fa,.nav-pf-vertical .list-group-item>a:focus .pficon{color:#39a5dc}
+.nav-pf-vertical .list-group-item>a{font-size:13px;font-weight:300!important;text-decoration:none}
 @media (max-width:767px){.nav-pf-vertical .list-group-item>a{height:auto;padding:10px 15px}
 }
 .nav-pf-vertical .list-group-item>a .fa,.nav-pf-vertical .list-group-item>a .pficon{color:#72767b;font-size:15px}
 @media (min-width:768px){.nav-pf-vertical .list-group-item>a .fa,.nav-pf-vertical .list-group-item>a .pficon{font-size:18px}
 }
 .nav-pf-vertical .list-group-item>a .list-group-item-value{line-height:inherit;text-decoration:none!important}
-.nav-pf-vertical .list-group-item.secondary-nav-item-pf>a:after{padding:16px 0;font-size:14px}
+.nav-pf-vertical .list-group-item.secondary-nav-item-pf>a:after{font-size:14px;padding:16px 0}
 @media (max-width:767px){.nav-pf-vertical .list-group-item.secondary-nav-item-pf>a:after{padding:8px 0}
 }
-.nav-pf-vertical.collapsed .list-group-item.secondary-nav-item-pf.active>a:after,.nav-pf-vertical.collapsed .list-group-item.secondary-nav-item-pf:hover>a:after{right:12px!important}
+.nav-pf-vertical .list-group-item.secondary-nav-item-pf.is-hover>a{width:221px;z-index:1031}
+.nav-pf-vertical .list-group-item.secondary-nav-item-pf.is-hover>a:after{color:#fff;right:21px}
+.nav-pf-vertical.collapsed .list-group-item.secondary-nav-item-pf.is-hover>a{width:77px}
+.nav-pf-vertical.collapsed .list-group-item.secondary-nav-item-pf.active>a:after,.nav-pf-vertical.collapsed .list-group-item.secondary-nav-item-pf.is-hover>a:after,.nav-pf-vertical.collapsed .list-group-item.secondary-nav-item-pf:hover>a:after{right:12px!important}
 .nav-pf-vertical.collapsed .nav-pf-secondary-nav{left:74px}
 .nav-pf-vertical.hide-mobile-nav{left:-222px}
 .nav-pf-vertical.show-mobile-nav{box-shadow:2px 0 3px rgba(3,3,3,.15);left:0;transition:left .1s ease-in-out}