diff --git a/src/components/DocumentationTopic/Hero/HierarchyCollapsedItems.vue b/src/components/DocumentationTopic/Hero/HierarchyCollapsedItems.vue
index 20c5bad12..14e7ea13f 100644
--- a/src/components/DocumentationTopic/Hero/HierarchyCollapsedItems.vue
+++ b/src/components/DocumentationTopic/Hero/HierarchyCollapsedItems.vue
@@ -100,8 +100,9 @@ $border-width: 1px;
 // Values specified in rgba due to alpha transparency used in the background
 // of the nav area, so they are represented as clear overlays here
 $toggle-bg-color: var(--color-nav-hierarchy-collapse-background);
-$toggle-bg-color-dark: var(--color-nav-dark-hierarchy-collapse-background);
+$toggle-bg-color-hover: var(--color-nav-hierarchy-collapse-background-hover);
 $toggle-border-color: var(--color-nav-hierarchy-collapse-borders);
+$toggle-border-color-hover: var(--color-nav-hierarchy-collapse-borders-hover);
 $hierarchy-toggle-border-width: 0 !default;
 $toggle-height: rem(19px);
 $toggle-width: rem(36px);
@@ -109,9 +110,7 @@ $toggle-width: rem(36px);
 // Values specified here are opaque versions of the dropdown colors so that
 // they match (without using alpha)
 $dropdown-bg-color: $toggle-bg-color;
-$dropdown-bg-color-dark: $toggle-bg-color-dark;
 $dropdown-border-color: var(--color-nav-hierarchy-collapse-borders);
-$dropdown-border-color-dark: var(--color-nav-dark-hierarchy-collapse-borders);
 $dropdown-transition-duration: 250ms;
 $hierarchy-dropdown-border-width: 0px !default;
 $hierarchy-dropdown-box-shadow: 0 1px 4px -1px var(--color-figure-gray-secondary) !default;
@@ -158,8 +157,10 @@ $dropdown-vertical-offset: rem(7px);
   display: flex;
   align-items: center;
   justify-content: center;
-  @include nav-dark() {
-    background: $toggle-bg-color-dark;
+
+  &:hover {
+    background: $toggle-bg-color-hover;
+    border-color: $toggle-border-color-hover;
   }
 
   &:active,
@@ -193,10 +194,6 @@ $dropdown-vertical-offset: rem(7px);
   position: absolute;
   z-index: 42;
   top: calc(100% + #{$dropdown-vertical-offset});
-  @include nav-dark() {
-    background: $dropdown-bg-color-dark;
-    border-color: $dropdown-border-color-dark;
-  }
 
   &.collapsed {
     opacity: 0;
@@ -234,10 +231,6 @@ $dropdown-vertical-offset: rem(7px);
     left: $tail-offset;
     position: absolute;
     top: rem($border-width) - $tail-width;
-
-    @include nav-dark() {
-      border-bottom-color: $dropdown-bg-color-dark;
-    }
   }
 }
 
@@ -246,10 +239,6 @@ $dropdown-vertical-offset: rem(7px);
   border-top-style: $border-style;
   border-top-width: $border-width;
 
-  @include nav-dark() {
-    border-top-color: $dropdown-border-color-dark;
-  }
-
   &:first-child {
     border-top: none;
   }
diff --git a/src/styles/core/colors/_dark.scss b/src/styles/core/colors/_dark.scss
index f64c64a77..2b4a5da38 100644
--- a/src/styles/core/colors/_dark.scss
+++ b/src/styles/core/colors/_dark.scss
@@ -44,8 +44,10 @@
   --color-nav-color: var(--color-nav-dark-color);
   --color-nav-current-link: var(--color-nav-dark-current-link);
   --color-nav-expanded: var(--color-nav-dark-expanded);
-  --color-nav-hierarchy-collapse-background: var(--color-nav-dark-hierarchy-collapse-background);
-  --color-nav-hierarchy-collapse-borders: var(--color-nav-dark-hierarchy-collapse-borders);
+  --color-nav-hierarchy-collapse-background: #{dark-color(fill-gray-tertiary)};
+  --color-nav-hierarchy-collapse-borders: #{light-color(figure-gray-secondary)};
+  --color-nav-hierarchy-collapse-background-hover: #{change-color(dark-color(fill-blue), $alpha: 0.5)};
+  --color-nav-hierarchy-collapse-borders-hover: #{dark-color(figure-blue)};
   --color-nav-hierarchy-item-borders: var(--color-nav-dark-hierarchy-item-borders);
   --color-nav-keyline: var(--color-nav-dark-keyline);
   --color-nav-link-color: var(--color-nav-dark-link-color);
diff --git a/src/styles/core/colors/_light.scss b/src/styles/core/colors/_light.scss
index ffdb91408..e3b504d9c 100644
--- a/src/styles/core/colors/_light.scss
+++ b/src/styles/core/colors/_light.scss
@@ -103,7 +103,9 @@
   --color-nav-current-link: #{change-color(light-color(figure-gray))};
   --color-nav-expanded: #{light-color(fill)};
   --color-nav-hierarchy-collapse-background: #{light-color(fill-gray-tertiary)};
+  --color-nav-hierarchy-collapse-background-hover: #{change-color(light-color(fill-blue), $alpha: 0.05)};
   --color-nav-hierarchy-collapse-borders: #{dark-color(figure-gray-secondary)};
+  --color-nav-hierarchy-collapse-borders-hover: #{light-color(figure-blue)};
   --color-nav-hierarchy-item-borders: #{dark-color(figure-gray-secondary)};
   --color-nav-keyline: #{change-color(light-color(figure-gray), $alpha: 0.2)};
   --color-nav-link-color: #{light-color(figure-gray)};
@@ -120,8 +122,6 @@
   --color-nav-dark-color: #{dark-color(figure-gray)};
   --color-nav-dark-current-link: #{change-color(dark-color(figure-gray))};
   --color-nav-dark-expanded: #{dark-color(fill-tertiary)};
-  --color-nav-dark-hierarchy-collapse-background: #{dark-color(fill-gray-tertiary)};
-  --color-nav-dark-hierarchy-collapse-borders: #{light-color(figure-gray-secondary)};
   --color-nav-dark-hierarchy-item-borders: #{dark-color(fill-gray-tertiary)};
   --color-nav-dark-keyline: #{change-color(dark-color(fill-gray-tertiary), $alpha: 0.95)};
   --color-nav-dark-link-color: #{dark-color(figure-gray)};