메인 메뉴 - 고객 지원 메뉴 수정

src/main/resources/static/css/main.css

@@ -1119,6 +1119,52 @@ hr {
   margin: 0;
   padding: 0;
 }
+.nav-menu > li {
+  position: relative;
+}
+.nav-menu > li.submenu-open > .nav-link {
+  background: var(--light-bg);
+  color: var(--primary-blue);
+}
+.nav-menu > li.submenu-open .sub-menu {
+  visibility: visible;
+  opacity: 1;
+  transform: translateY(0);
+}
+.nav-menu > li .sub-menu {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  min-width: 200px;
+  background: var(--white);
+  border: 1px solid var(--border-gray);
+  border-radius: 12px;
+  box-shadow: var(--shadow-xl);
+  padding: 8px 0;
+  visibility: hidden;
+  opacity: 0;
+  transform: translateY(-10px);
+  transition: all 0.3s ease;
+  z-index: 100;
+  list-style: none;
+  margin: 0;
+}
+.nav-menu > li .sub-menu li {
+  margin: 0;
+}
+.nav-menu > li .sub-menu li a {
+  display: block;
+  padding: 8px 24px;
+  color: var(--text-dark);
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.3s ease;
+}
+.nav-menu > li .sub-menu li a:hover {
+  background: var(--light-bg);
+  color: var(--primary-blue);
+}
 
 .nav-link {
   display: flex;

src/main/resources/static/sass/layout/_header.scss

@@ -626,6 +626,62 @@
   gap: 8px;
   margin: 0;
   padding: 0;
+
+  // Navigation item with submenu
+  > li {
+    position: relative;
+
+    &.submenu-open {
+      > .nav-link {
+        background: var(--light-bg);
+        color: var(--primary-blue);
+      }
+
+      .sub-menu {
+        visibility: visible;
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    .sub-menu {
+      position: absolute;
+      top: calc(100% + 8px);
+      left: 0;
+      min-width: 200px;
+      background: var(--white);
+      border: 1px solid var(--border-gray);
+      border-radius: $border-radius-lg;
+      box-shadow: var(--shadow-xl);
+      padding: $spacing-sm 0;
+      visibility: hidden;
+      opacity: 0;
+      transform: translateY(-10px);
+      transition: all 0.3s ease;
+      z-index: $z-index-dropdown;
+      list-style: none;
+      margin: 0;
+
+      li {
+        margin: 0;
+
+        a {
+          display: block;
+          padding: $spacing-sm $spacing-lg;
+          color: var(--text-dark);
+          text-decoration: none;
+          font-size: $font-size-sm;
+          font-weight: $font-weight-medium;
+          transition: all 0.3s ease;
+
+          &:hover {
+            background: var(--light-bg);
+            color: var(--primary-blue);
+          }
+        }
+      }
+    }
+  }
 }
 
 .nav-link {
@@ -727,38 +783,6 @@
         }
 
         &.has-submenu > a::after { display: none; }
-
-        .sub-menu {
-          position: absolute;
-          top: 100%;
-          left: 0;
-          background: var(--white);
-          border: 1px solid var(--border-gray);
-          border-radius: 8px;
-          box-shadow: var(--shadow-lg);
-          min-width: 200px;
-          padding: 8px 0;
-          display: none;
-          z-index: 1001;
-
-          a {
-            display: block;
-            padding: 8px 16px;
-            color: var(--text-dark);
-            font-size: 14px;
-            text-decoration: none;
-            transition: all 0.3s ease;
-
-            &:hover {
-              background: var(--light-bg);
-              color: var(--primary-blue);
-            }
-          }
-        }
-
-        &:hover .sub-menu {
-          display: block;
-        }
       }
     }
   }