diff --git a/awx/ui/client/lib/components/layout/side-nav-item.directive.js b/awx/ui/client/lib/components/layout/side-nav-item.directive.js
index 95ca0e5f7c..4cccabe8fc 100644
--- a/awx/ui/client/lib/components/layout/side-nav-item.directive.js
+++ b/awx/ui/client/lib/components/layout/side-nav-item.directive.js
@@ -5,11 +5,15 @@ function atSideNavItemLink (scope, element, attrs, ctrl) {
 
     if (attrs.showSettingsSubMenu) {
         element.hover(() => {
+            scope.navVm.onSettingsNavItem = true;
             scope.navVm.showSettingsSubMenu = true;
         }, () => {
-            // TODO: don't hide when mouse is hovering over the sub menu itself
-            // currently it closes as soon as you nav off of the settings side nav item
-            scope.navVm.showSettingsSubMenu = false;
+            setTimeout(() => {
+                scope.navVm.onSettingsNavItem = false;
+                if (!scope.navVm.onSettingsSubPane) {
+                    scope.navVm.showSettingsSubMenu = false;
+                }
+            }, 100);
         });
     }
 }
diff --git a/awx/ui/client/lib/components/layout/side-nav.directive.js b/awx/ui/client/lib/components/layout/side-nav.directive.js
index 3fbf7cd86f..81e3b63dd7 100644
--- a/awx/ui/client/lib/components/layout/side-nav.directive.js
+++ b/awx/ui/client/lib/components/layout/side-nav.directive.js
@@ -10,6 +10,15 @@ function atSideNavLink (scope, element, attrs, ctrl) {
             scope.$emit('clickOutsideSideNav');
         }
     });
+
+    element.find('.at-SettingsSubPane').hover(() => {
+        scope.vm.onSettingsSubPane = true;
+    }, () => {
+        if (!scope.vm.onSettingsNavItem) {
+            scope.vm.onSettingsSubPane = false;
+            scope.vm.showSettingsSubMenu = false;
+        }
+    });
 }
 
 function AtSideNavController ($scope, $window) {