diff --git a/docs/.vitepress/src/components/DocMenu.vue b/docs/.vitepress/src/components/DocMenu.vue
index 34a25430877efe0e8ef128bab613116bbc574dd7..5cf84149b3ca1241c418f4bd4d875b8b22f63d7a 100644
--- a/docs/.vitepress/src/components/DocMenu.vue
+++ b/docs/.vitepress/src/components/DocMenu.vue
@@ -57,8 +57,8 @@ const expanded = useVModel(props, 'expanded', emits);
     <OScroller id="menuScrollDom" show-type="hover" size="small" disabled-x>
       <RecursionMenu v-if="recursion" v-model="menuValue" v-model:expanded="expanded" :default-expanded="defaultExpanded">
         <template v-if="items.length > 0">
-          <OMenuItem :value="items[0].id" @click="emits('click', items[0])">{{ items[0].label }}</OMenuItem>
-          <RecursionMenuItem v-for="item in items[0].children" :node="item" @click="(el) => emits('click', el)" />
+          <OMenuItem class="menu-title">{{ items[0].label }}</OMenuItem>
+          <RecursionMenuItem class="menu-content" v-for="item in items[0].children" :node="item" @click="(el) => emits('click', el)" />
         </template>
       </RecursionMenu>
 
@@ -118,6 +118,23 @@ const expanded = useVModel(props, 'expanded', emits);
     padding-right: 20px;
   }
 
+  .menu-title {
+    --menu-padding-v: 0;
+    --menu-padding-h: 0;
+    font-weight: 500;
+    margin-bottom: 16px;
+    cursor: auto;
+    @include text2;
+
+    @include hover {
+      --menu-item-bg-color-hover: transparent;
+    }
+  }
+
+  .menu-content {
+    margin-left: 8px;
+  }
+
   .chapter-menu {
     --menu-width: 272px;
     --menu-padding-v: 8px;
diff --git a/docs/.vitepress/src/components/menu/RecursionMenuItem.vue b/docs/.vitepress/src/components/menu/RecursionMenuItem.vue
index ad50da84550ff45b49db4389bcf44918cc373a1c..4867b99f92967abd6d2d3f0f91191ff8253aa586 100644
--- a/docs/.vitepress/src/components/menu/RecursionMenuItem.vue
+++ b/docs/.vitepress/src/components/menu/RecursionMenuItem.vue
@@ -30,9 +30,10 @@ const emits = defineEmits(['click']);
 <style lang="scss" scoped>
 .recursion-sub-menu {
   --sub-menu-bg-color-selected: transparent;
+  --sub-menu-color: var(--o-color-info2);
 
   :deep(.o-sub-menu-title) {
-    padding-left: 8px !important;
+    padding-left: 4px !important;
   }
 
   :deep(.o-sub-menu-title-content) {
@@ -49,6 +50,7 @@ const emits = defineEmits(['click']);
   :deep(.o-sub-menu-children) {
     position: relative;
     margin-left: 16px;
+    margin-top: 0;
     // padding-left: 4px;
     // border-left: 1px solid var(--o-color-control4);
 
@@ -72,7 +74,8 @@ const emits = defineEmits(['click']);
 }
 
 .recursion-menu-item {
-  padding-left: 8px !important;
+  padding-left: 4px !important;
+  --menu-item-color: var(--o-color-info2);
 
   :deep(.o-menu-item-content) {
     overflow: auto;
@@ -83,6 +86,13 @@ const emits = defineEmits(['click']);
   }
 }
 
+.o-sub-menu + .o-sub-menu {
+  margin-top: 0;
+}
+.o-menu-item + .o-menu-item {
+  margin-top: 0;
+}
+
 .o-sub-menu-selected > :deep(.o-sub-menu-title) {
   background-color: var(--o-color-control3-light);
 }