diff --git a/docs/.vitepress/config/en.ts b/docs/.vitepress/config/en.ts
index 1f619347..ee306b58 100644
--- a/docs/.vitepress/config/en.ts
+++ b/docs/.vitepress/config/en.ts
@@ -60,14 +60,32 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] {
   return [
     {
       text: 'Introduction',
-      collapsed: false,
+      collapsed: true,
       items: [
-        { text: 'What is VitePress?', link: 'what-is-vitepress' },
+        {
+          text: 'Group heading linked to "What is VitePress?"',
+          link: 'what-is-vitepress',
+          collapsed: true,
+          items: [
+            {
+              text: 'Another group heading linked to "What is VitePress?"',
+              link: 'what-is-vitepress',
+              collapsed: true,
+              items: [
+                {
+                  text: 'What is VitePress?',
+                  link: 'what-is-vitepress'
+                }
+              ]
+            }
+          ]
+        },
         { text: 'Getting Started', link: 'getting-started' },
         { text: 'Routing', link: 'routing' },
         { text: 'Deploy', link: 'deploy' }
       ]
     },
+    { text: 'What is VitePress?', link: 'what-is-vitepress' },
     {
       text: 'Writing',
       collapsed: false,
diff --git a/src/client/theme-default/components/VPSidebarItem.vue b/src/client/theme-default/components/VPSidebarItem.vue
index c70d03b8..08a74dc1 100644
--- a/src/client/theme-default/components/VPSidebarItem.vue
+++ b/src/client/theme-default/components/VPSidebarItem.vue
@@ -200,12 +200,8 @@ const classes = computed(() => [
   flex-shrink: 0;
 }
 
-.item:hover .caret {
-  color: var(--vp-c-text-2);
-}
-
-.item:hover .caret:hover {
-  color: var(--vp-c-text-1);
+.item summary:hover .caret {
+  color: var(--vp-c-text-1)
 }
 
 .caret-icon {