丰潇网站完成

fengxiao/css/header.css

@@ -5,13 +5,14 @@
     align-items: center;
     justify-content: space-between;
     /* background: #fff; */
-    background-color: rgba(255, 255, 255, 0.1);
+    background-color: rgba(241, 241, 241, 0.5);
     z-index: 1000;
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     transition: background 0.3s;
+    margin: 0;
 }
 
 
@@ -75,6 +76,7 @@
 
    
 }
+
 /* .nav-item a.active::before {
     content: '';
     width: 100%;
@@ -153,7 +155,7 @@
   
     border-top: 5px solid #3478FD;
 }
-.nav-dropdown a:hover .arrow{
+.nav-dropdown a:hover .arrow,.nav-item a.active .arrow{
     border-top: 5px solid #3478FD;
 }
 
@@ -282,23 +284,39 @@
 }
 
 
-.menu-active .dropdown-item {
-    background: transparent;
-    border: 1px solid #00a0d1  
-    
 
+
+
+/* 让 menu-active 和 hover 效果一致 */
+.dropdown-menu li a.menu-active,
+.dropdown-menu li a:hover {
+    background: #f2f8fa;
+    color: #3478FD;
 }
 
-.menu-active .dropdown-item img {
+/* 图标边框和滤镜一致 */
+.dropdown-menu li a.menu-active .dropdown-item,
+.dropdown-menu li a:hover .dropdown-item {
+ 
+    display: inline-block;
+    margin-left: 6px;
+    width: 0;
+    height: 0;
+    vertical-align: middle;
+    border-top: 5px solid transparent;
+    border-bottom: 5px solid transparent;
+    border-left: 5px solid #3478FD;
+    transition: transform 0.2s;
+    transition: all 0.2s;
+    /* transform: scale(1.1); */
+}
+
+.dropdown-menu li a.menu-active .dropdown-item img,
+.dropdown-menu li a:hover .dropdown-item img {
     filter: brightness(0) saturate(100%) invert(41%) sepia(99%) saturate(749%) hue-rotate(162deg) brightness(97%) contrast(101%);
     transition: all 0.3s ease;
 }
 
-.dropdown-menu li a.menu-active {
-    background: #f2f8fa;
-    color: #007a9e;
-}
-