diff --git a/annotation-setting.yaml b/annotation-setting.yaml
index 0048c06c..6409bd57 100644
--- a/annotation-setting.yaml
+++ b/annotation-setting.yaml
@@ -10,7 +10,15 @@ spec:
     - $formkit: "text"
       name: "icon"
       label: "图标"
-
+    - $formkit: "radio"
+      name: "isVertical"
+      value: 0
+      label: "该菜单的子菜单是否为垂直菜单"
+      options:
+        - label: 是
+          value: 1
+        - label: 否
+          value: 0
 ---
 
 apiVersion: v1alpha1
diff --git a/templates/assets/zhheo/zhheoblog.css b/templates/assets/zhheo/zhheoblog.css
index 87c57e92..13f805c4 100644
--- a/templates/assets/zhheo/zhheoblog.css
+++ b/templates/assets/zhheo/zhheoblog.css
@@ -2960,7 +2960,8 @@ blockquote footer cite::before {
     padding: 0px 0.4rem 0px 0px;
 }
 
-#nav .menus_items .menus_item:hover .menus_item_child {
+#nav .menus_items .recursion_menus_item:hover > .menus_item_child,
+#nav .menus_items .menus_item:hover > .menus_item_child {
     display: block;
 }
 
@@ -2994,6 +2995,10 @@ blockquote footer cite::before {
     content: "";
 }
 
+#nav .menus_items .menus_item .recursion_menus_item > .menus_item_child{
+    margin-top: 24px;
+}
+
 #nav.hide-menu #toggle-menu {
     display: inline-block !important;
 }
@@ -5371,6 +5376,10 @@ html {
     top: -10px;
 }
 
+#nav .menus_items .menus_item .recursion_menus_item > .menus_item_child:before {
+    top: -20px;
+}
+
 /* #menus > div.menus_items > div:nth-child(1) > ul{
   right: -200px!important;
 }
@@ -5387,16 +5396,16 @@ html {
   right: -200px!important;
 } */
 
-#nav .menus_items .menus_item .menus_item_child li a:hover {
+#nav .menus_items .menus_item .menus_item_child > .recursion_menus_item:hover > a {
     background: var(--heo-main) !important;
     color: var(--heo-white) !important;
     box-shadow: var(--heo-shadow-main);
     margin: 0 auto;
     transform: scale(1) !important;
-    padding: 0.3rem 0.7rem;
+    padding: 0.3rem 0.5rem;
 }
 
-#nav .menus_items .menus_item .menus_item_child li a i:not(.fa-brands) {
+#nav .menus_items .menus_item .menus_item_child > .recursion_menus_item a i:not(.fa-brands) {
     font-size: 1rem;
     margin-right: 8px;
 }
@@ -5409,13 +5418,65 @@ html {
     margin: auto;
 }
 
-#nav .menus_items .menus_item .menus_item_child li {
+#nav .menus_items .menus_item .menus_item_child > .recursion_menus_item {
     display: inline-flex;
     list-style: none;
     border-radius: 5px;
     margin: 0 4px;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
 }
 
+/*---------竖向菜单--------*/
+#nav .menus_items .menus_item .menus_item_child.vertical_nav > .recursion_menus_item {
+    display: inline-flex;
+    list-style: none;
+    border-radius: 5px;
+    margin: 0 4px;
+    flex-direction: column;
+    align-items: center;
+}
+/**
+    上级菜单为横向菜单时
+ */
+
+
+/*-------本菜单竖向菜单时------*/
+/* 第三级之后的菜单列 */
+#nav .menus_items .menus_item .menus_item_child > .recursion_menus_item > .menus_item_child.vertical_nav{
+    margin-top: 24px;
+    border-radius: 24px;
+    padding: 2px 0px;
+}
+/* 第三级之后的菜单项 */
+#nav .menus_items .recursion_menus_item .menus_item_child.vertical_nav > .recursion_menus_item{
+    display: flex;
+    margin-top: 4px;
+    padding: 2px 0;
+}
+/* 第三级之后的菜单项（第一个菜单项） */
+#nav .menus_items .recursion_menus_item .menus_item_child.vertical_nav > .recursion_menus_item:nth-child(1){
+    margin-top: 0;
+}
+/*-------本菜单竖向菜单时END------*/
+
+/*-------上级菜单为竖向菜单时------*/
+/*第四级以后的菜单列*/
+#nav .menus_items .recursion_menus_item > .menus_item_child.vertical_nav > .recursion_menus_item > .menus_item_child{
+    position: absolute;
+    left: calc(100% + 12px);
+    top: 0;
+    margin-top: 0;
+}
+#nav .menus_items .recursion_menus_item > .menus_item_child.vertical_nav > .recursion_menus_item > .menus_item_child:before{
+    left: -20px;
+    height: 100%;
+    width: 30px;
+    top: 0;
+}
+/*-------上级菜单为竖向菜单时END------*/
+
 /* 导航栏按钮悬浮 */
 #nav a {
     border-radius: 8px;
@@ -6873,12 +6934,12 @@ img.footer_mini_logo:hover {
     border-radius: 40px;
 }
 
-#nav .menus_items .menus_item .menus_item_child li a {
+#nav .menus_items .menus_item .menus_item_child > .recursion_menus_item > a {
     letter-spacing: 0rem;
     display: flex;
     align-items: center;
     border-radius: 100px;
-    padding: 0.3rem 1rem;
+    padding: 0.2rem 0.5rem;
     width: 100%;
     color: var(--heo-fontcolor) !important;
     text-shadow: none !important;
@@ -17596,7 +17657,7 @@ code:not([class]) {
     padding: 2px 2px 4px 2px;
     border-radius: 55px;
 }
-#nav .menus_items .menus_item .menus_item_child li a:hover {
+#nav .menus_items .menus_item .menus_item_child > .recursion_menus_item:hover > a {
     padding: 0.2rem 0.5rem;
 }
 .postcarnepre{
diff --git a/templates/modules/widgets/nav-menu.html b/templates/modules/widgets/nav-menu.html
index 7f48cdb1..0f42bae6 100644
--- a/templates/modules/widgets/nav-menu.html
+++ b/templates/modules/widgets/nav-menu.html
@@ -1,8 +1,29 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 
+
+<th:block th:fragment="nav-menu-recursion(menuItem)">
+    <!-- 有子菜单则显示子菜单 -->
+    <th:block th:if="${not #lists.isEmpty(menuItem.children)}">
+        <!-- 子菜单 -->
+        <div class="menus_item_child" th:classappend="${#annotations.get(menuItem,'isVertical')=='1'?'vertical_nav':''}">
+            <div class="recursion_menus_item" th:each="childMenu : ${menuItem.children}">
+                <a class="site-page child" th:target="${childMenu.spec.target?.value}" th:href="@{${childMenu.status.href}}">
+                    <i th:if="${!#strings.isEmpty(#annotations.getOrDefault(childMenu, 'icon', ''))}"
+                       th:class="${#annotations.getOrDefault(childMenu, 'icon', '')}"
+                       style="font-size:.9em"></i>
+                    <span th:text="${childMenu.status.displayName}"></span>
+                </a>
+                <!--递归调用-->
+                <div th:replace="~{modules/widgets/nav-menu :: nav-menu-recursion(menuItem=${childMenu})}"></div>
+            </div>
+        </div>
+    </th:block>
+</th:block>
+
 <!-- 导航栏菜单栏 -->
 <div id="menus" th:fragment="nav-menu">
+
     <div class="menus_items">
 
         <!-- 第一层仅展示使用，不做跳转 -->
@@ -19,22 +40,8 @@
             <a th:if="${not #lists.isEmpty(menuItem.children)}" class="site-page" rel="external nofollow">
                 <span th:text="${menuItem.status.displayName}"></span>
             </a>
-
-            <!-- 有子菜单则显示子菜单 -->
-            <th:block th:if="${not #lists.isEmpty(menuItem.children)}">
-                <!-- 子菜单 -->
-                <ul class="menus_item_child">
-                    <li th:each="childMenu : ${menuItem.children}">
-                        <a class="site-page child" th:target="${childMenu.spec.target?.value}" th:href="@{${childMenu.status.href}}">
-                            <i th:if="${!#strings.isEmpty(#annotations.getOrDefault(childMenu, 'icon', ''))}"
-                               th:class="${#annotations.getOrDefault(childMenu, 'icon', '')}"
-                               style="font-size:.9em"></i>
-                            <span th:text="${childMenu.status.displayName}"></span>
-                        </a>
-                    </li>
-                </ul>
-            </th:block>
-
+            <!--递归调用-->
+            <div th:replace="~{modules/widgets/nav-menu :: nav-menu-recursion(menuItem=${menuItem})}"></div>
         </div>
 
     </div>