三级菜单

css/nav-mega-menu.css

@@ -127,10 +127,11 @@
 .nav-third-link {
   display: block;
   width: 100%;
-  padding: 10px 12px;
+  padding: 10px 12px 10px 24px;
   border-radius: 4px;
   color: #333;
   font-size: 13px;
+  font-weight: 500;
   text-decoration: none;
   transition: all 0.2s ease;
   border: 1px solid transparent;
@@ -138,30 +139,29 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  position: relative;
+}
+
+.nav-third-link::before {
+  content: '›';
+  position: absolute;
+  left: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #1890ff;
+  font-size: 16px;
+  font-weight: bold;
 }
 
 .nav-third-link:hover {
   background: #e6f7ff;
   border-color: #91d5ff;
   color: #1890ff;
-  padding-left: 20px;
+  padding-left: 28px;
 }
 
-.nav-third-link::before {
+.nav-third-link:hover::before {
-  content: '› ';
+  left: 12px;
-  color: #1890ff;
-  font-size: 14px;
-  font-weight: bold;
-}
-
-.nav-third-name {
-  font-weight: 500;
-}
-
-.nav-third-desc {
-  font-size: 11px;
-  color: #999;
-  margin-left: 8px;
 }
 
 /* 空状态 */

public/header.html

@@ -107,11 +107,9 @@
                 {foreach $child.children as $grandchild}
                 <div class="nav-third-item">
                   <a href="{if !empty($grandchild.file_address)}{$grandchild.file_address}{else/}javascript:;{/if}"
-                    class="nav-third-link" {if !empty($grandchild.blank)}target="_blank" {/if}>
+                    class="nav-third-link" {if !empty($grandchild.blank)}target="_blank" {/if}
-                    <span class="nav-third-name">{$grandchild.name}</span>
+                    title="{$grandchild.name}{if !empty($grandchild.description)} - {$grandchild.description}{/if}">
-                    {if !empty($grandchild.description)}
+                    {$grandchild.name}
-                    <span class="nav-third-desc">{$grandchild.description}</span>
-                    {/if}
                   </a>
                 </div>
                 {/foreach}