diff --git a/templates/assets/css/style.css b/templates/assets/css/style.css
index 53a2780..d467963 100644
--- a/templates/assets/css/style.css
+++ b/templates/assets/css/style.css
@@ -83,7 +83,7 @@ h6,
 }
 
 #header.header-scrolled {
-  background: none;
+  background: #ffffffc9;
   height: 60px;
 }
 
@@ -121,14 +121,19 @@ h6,
 */
 .navbar {
   padding: 0;
+  width: 100%;
+  position: relative;
 }
 
-.navbar ul {
-  margin: 0;
+.navbar > ul.navbar-nav {
+  margin: 0 auto;
   padding: 0;
   display: flex;
   list-style: none;
   align-items: center;
+  justify-content: center;
+  width: auto;
+  max-width: 1200px;
 }
 
 .navbar li {
@@ -139,8 +144,8 @@ h6,
 .navbar a:focus {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  padding: 10px 0 10px 30px;
+  justify-content: center;
+  padding: 15px 25px;
   font-family: "Open Sans", sans-serif;
   font-size: 14px;
   color: #000000;
@@ -148,13 +153,6 @@ h6,
   transition: 0.3s;
 }
 
-.navbar a i,
-.navbar a:focus i {
-  font-size: 12px;
-  line-height: 0;
-  margin-left: 5px;
-}
-
 .navbar a:hover,
 .navbar .active,
 .navbar .active:focus,
@@ -162,71 +160,138 @@ h6,
   color: #34C5DD;
 }
 
-.navbar .dropdown ul {
-  display: block;
+/* 下拉菜单样式 - 铺满屏幕宽度 */
+.navbar .dropdown-menu {
   position: absolute;
-  left: 14px;
-  top: calc(100% + 30px);
-  margin: 0;
-  padding: 10px 0;
-  z-index: 99;
+  left: 50%; /* 关键修改：从左侧50%位置开始 */
+  transform: translateX(-40%); /* 关键修改：向左回退50%自身宽度 */
+  top: 100%;
+  width: 50%; /* 改为自动宽度 */
+  min-width: 600px; /* 设置最小宽度 */
+  display: block; /* 改为block布局 */
+  background: #fff;
+  padding: 15px 0;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
   opacity: 0;
   visibility: hidden;
-  background: #fff;
-  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
-  transition: 0.3s;
+  transition: opacity 0.3s ease-in-out;
+  z-index: 1000;
 }
 
-.navbar .dropdown ul li {
-  min-width: 200px;
+/* 下拉菜单容器 */
+.navbar .dropdown-menu > ul {
+  display: flex;
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 15px;
+  justify-content: space-around;
 }
 
-.navbar .dropdown ul a {
-  padding: 10px 20px;
-  font-size: 14px;
-  text-transform: none;
-  color: #1c3745;
+/* 下拉菜单项 */
+.navbar .dropdown-menu li {
+  text-align: center;
+  min-width: 0;
 }
 
-.navbar .dropdown ul a i {
-  font-size: 12px;
+/* 修改这里：二级菜单链接始终显示下划线 */
+.navbar .dropdown-menu a {
+  padding: 8px 5px;
+  display: block;
+  color: #333;
+  text-decoration: underline; /* 始终显示下划线 */
+  text-underline-offset: 10px; /* 下划线距离文字的距离 */
+  text-decoration-color: rgba(0, 0, 0, 0.3); /* 下划线颜色稍浅 */
+  white-space: normal;
+  transition: all 0.3s;
 }
 
-.navbar .dropdown ul a:hover,
-.navbar .dropdown ul .active:hover,
-.navbar .dropdown ul li:hover>a {
-  color: #68A4C4;
+/* 悬停时下划线颜色加深 */
+.navbar .dropdown-menu a:hover {
+  color: #007bff;
+  text-decoration-color: #007bff; /* 悬停时下划线颜色变深 */
 }
 
-.navbar .dropdown:hover>ul {
+.navbar .nav-item:hover .dropdown-menu {
   opacity: 1;
-  top: 100%;
   visibility: visible;
 }
 
-.navbar .dropdown .dropdown ul {
-  top: 0;
-  left: calc(100% - 30px);
-  visibility: hidden;
-}
-
-.navbar .dropdown .dropdown:hover>ul {
-  opacity: 1;
-  top: 0;
-  left: 100%;
-  visibility: visible;
-}
-
-@media (max-width: 1366px) {
-  .navbar .dropdown .dropdown ul {
-    left: -90%;
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .navbar > ul.navbar-nav {
+    flex-direction: column;
   }
-
-  .navbar .dropdown .dropdown:hover>ul {
-    left: -100%;
+  
+  .navbar .dropdown-menu {
+    position: static;
+    width: 100%;
+    margin-left: 0;
+    display: none;
+  }
+  
+  .navbar .nav-item:hover .dropdown-menu {
+    display: flex;
+  }
+  
+  .navbar .dropdown-menu > ul {
+    flex-direction: column;
+  }
+  
+  /* 移动端下划线样式 */
+  .navbar .dropdown-menu a {
+    text-underline-offset: 3px;
+    padding: 8px 0;
   }
 }
 
+.navbar-nav > li > .dropdown-toggle::after {
+  display: none;
+}
+
+/* 原有样式保持不变，添加以下新样式 */
+
+/* 三级菜单容器 */
+.navbar .dropdown-submenu {
+  position: relative;
+}
+
+/* 三级菜单链接样式 - 移除了下划线 */
+.navbar .dropdown-menu .third-level a {
+  padding: 8px 15px 8px 1px; /* 增加左边距表示层级 */
+  color: #666;
+  text-decoration: none; /* 移除了下划线 */
+}
+
+/* 三级菜单悬停效果 */
+.navbar .dropdown-menu .third-level a:hover {
+  color: #007bff;
+  text-decoration: none; /* 确保悬停时也没有下划线 */
+  background-color: rgba(0, 0, 0, 0.05); /* 添加轻微背景色变化 */
+}
+
+/* 三级菜单链接样式 */
+.navbar .dropdown-menu.third-level a {
+  padding: 8px 15px 8px 30px; /* 增加左边距表示层级 */
+  color: #666;
+  text-decoration: underline;
+  text-underline-offset: 4px;
+  text-decoration-color: rgba(0, 0, 0, 0.2);
+}
+
+/* 响应式设计 - 移动端 */
+@media (max-width: 768px) {
+  .navbar .dropdown-menu.third-level {
+    padding-left: 20px; /* 移动端增加缩进 */
+    background-color: #f5f5f5;
+  }
+  
+  .navbar .dropdown-menu.third-level a {
+    padding-left: 40px; /* 更大的缩进 */
+  }
+}
+
+
 /**
 * Mobile Navigation 
 */
diff --git a/templates/modules/header.html b/templates/modules/header.html
index 053cef3..63b50ae 100644
--- a/templates/modules/header.html
+++ b/templates/modules/header.html
@@ -15,49 +15,7 @@
       <!-- 预加载 logo 图片（如果有） -->
       <link th:unless="${#strings.isEmpty(site.logo)}" rel="preload" th:href="${site.logo}" as="image">
   </div>
-  
-    <nav id="navbar" class="navbar" th:if="${theme.config.common_style.show_menu}">
-      <ul>
-        <li><a th:class="${page=='home'}" href="/">首页</a></li>
-        <li><a th:if="${theme.config.about.show}"
-            th:with="about = ${singlePageFinder.getByName(theme.config.about.page)}"
-            th:class="${page==about.spec.slug} ? 'active' : '' " th:href="@{'/' + ${about.spec.slug}}"
-            th:text="${about.spec.title}"></a></li>
-        <li><a th:if="${theme.config.service.show}"
-            th:with="service = ${singlePageFinder.getByName(theme.config.service.page)}"
-            th:class="${page==service.spec.slug} ? 'active' : '' " th:href="@{'/' + ${service.spec.slug}}"
-            th:text="${service.spec.title}"></a></li>
-        <li><a th:if="${theme.config.team.show}" th:with="team = ${singlePageFinder.getByName(theme.config.team.page)}"
-            th:class="${page==team.spec.slug} ? 'active' : '' " th:href="@{'/' + ${team.spec.slug}}"
-            th:text="${team.spec.title}"></a></li>
-        <li><a th:if="${theme.config.blog.show}"
-            th:with="blog = ${singlePageFinder.getByName(theme.config.blog.page)}"
-            th:class="${page==blog.spec.slug} ? 'active' : '' " th:href="@{'/' + ${blog.spec.slug}}"
-            th:text="${blog.spec.title}"></a></li>
-        <li><a th:if="${theme.config.contact.show}"
-            th:with="contact = ${singlePageFinder.getByName(theme.config.contact.page)}"
-            th:class="${page==contact.spec.slug} ? 'active' : '' " th:href="@{'/' + ${contact.spec.slug}}"
-            th:text="${contact.spec.title}"></a></li>
-        <th:block th:if="${not #strings.isEmpty(theme.config.common_style.extra_menu)}"
-          th:with="menus=${menuFinder.getByName(theme.config.common_style.extra_menu)}">
-          <li th:each="menu : ${menus.menuItems}" th:class="${#arrays.isEmpty(menu.spec.children)} ? '' : 'dropdown'">
-            <a th:if="${#arrays.isEmpty(menu.spec.children)}" target="_blank" th:href="@{${menu.status.href}}"
-              th:text="${menu.status.displayName}"></a>
-            <th:block th:if="${not #arrays.isEmpty(menu.spec.children)}">
-              <a href="#">
-                <span th:text="${menu.spec.displayName}"></span>
-                <i class="bi bi-chevron-down"></i>
-              </a>
-              <ul>
-                <th:block th:each="child : ${menu.children}">
-                  <li><a th:href="${child.status.href}" target="_blank" th:text="${child.status.displayName}"></a></li>
-                </th:block>
-              </ul>
-            </th:block>
-          </li>
-        </th:block>
-      </ul>
-      <i class="bi bi-list mobile-nav-toggle"></i>
-    </nav>
+    
+  <nav th:replace="modules/navbar.html"></nav>
   </div>
 </header>
\ No newline at end of file
diff --git a/templates/modules/navbar.html b/templates/modules/navbar.html
new file mode 100644
index 0000000..c93e250
--- /dev/null
+++ b/templates/modules/navbar.html
@@ -0,0 +1,42 @@
+<nav class="navbar" th:with="menu = ${menuFinder?.getPrimary()}">
+  <ul class="navbar-nav d-flex flex-row"
+      th:if="${menu} and ${not menu.menuItems.empty}" 
+      th:with="menuItems = ${menu.menuItems}">
+      
+    <li class="nav-item dropdown" th:each="menuItem : ${menuItems}">
+      <a class="nav-link dropdown-toggle" 
+         th:text="${menuItem.status?.displayName}" 
+         th:href="${menuItem.status?.href}"
+         th:target="${menuItem.spec?.target?.value}"
+         th:attr="data-bs-toggle=${not menuItem.children?.empty} ? 'dropdown' : null">
+      </a>
+      
+      <!-- 二级下拉菜单 -->
+      <div class="dropdown-menu" th:if="${not menuItem.children?.empty}">
+        <ul>
+          <li class="dropdown-submenu" th:each="child : ${menuItem.children}">
+            <a class="dropdown-item" 
+               th:text="${child.status?.displayName}" 
+               th:href="${child.status?.href}"
+               th:target="${child.spec?.target?.value}"
+               th:attr="data-bs-toggle=${not child.children?.empty} ? 'dropdown' : null">
+            </a>
+            
+            <!-- 三级下拉菜单 - 现在将显示在二级菜单框内 -->
+            <div class="third-level" th:if="${not child.children?.empty}">
+              <ul>
+                <li th:each="grandchild : ${child.children}">
+                  <a class="dropdown-item" 
+                     th:text="${grandchild.status?.displayName}" 
+                     th:href="${grandchild.status?.href}"
+                     th:target="${grandchild.spec?.target?.value}">
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </li>
+  </ul>
+</nav>
\ No newline at end of file