Save

layout/style-scss/nav-menu.scss

@@ -21,7 +21,12 @@ header#header {
 
 				opacity: 0;
 				visibility: hidden;
+
+				.container {
+					position: relative;
+				}
 			}
+
 			ul {
 				list-style: none;
 
@@ -65,42 +70,128 @@ header#header {
 					}
 				}
 				&.lvl-2 {
-					// position: absolute;
-					// top: 100%;
-					// top: calc(100% - 25px);
-					// left: 0;
-					// right: 0;
-					// width: 100%;
-					// padding-top: 25px;
-					// padding-bottom: 25px;
-					// margin-left: auto;
-					// margin-right: auto;
+					width: 150px;
 
-					// opacity: 0;
-					// visibility: hidden;
+					> li {
+						&:not(:last-child) {
+							margin-bottom: 20px;
+						}
 
-					&::after {
-						// content: '';
-						// position: absolute;
-						// left: 50%;
-						// top: 0;
-						// bottom: 0;
-						// width: 100svw;
-						// // background: rgba($cWhite, 0.5);
-						// background: $cWhite;
-						// transform: translateX(-50%);
+						&:hover {
+							> a {
+								span {
+									text-shadow: 0px 0.3px 0px $cTxtBlack,
+										0px -0.3px 0px $cTxtBlack, 0.3px 0px 0px $cTxtBlack,
+										-0.3px 0px 0px $cTxtBlack, -0.3px -0.3px 0px $cTxtBlack,
+										0.3px 0.3px 0px $cTxtBlack, 0.3px -0.3px 0px $cTxtBlack,
+										-0.3px 0.3px 0px $cTxtBlack, -0.3px 0.3px 0px $cTxtBlack;
 
-						// // backdrop-filter: blur(10px);
-						// border-bottom: 1px solid #dcdcdc;
-						// box-shadow: 0 1.5px 4px 0 rgba(0, 0, 0, 0.05);
+									&::before {
+										width: 100%;
+										visibility: visible;
+									}
+								}
+
+								img {
+									width: 11px;
+								}
+							}
+
+							.lvl-3 {
+								opacity: 1;
+								visibility: visible;
+							}
+						}
+
+						> a {
+							position: relative;
+							width: 100%;
+							display: inline-flex;
+							flex-direction: row;
+							align-items: center;
+							column-gap: 5px;
+							text-decoration: none;
+							transition: all 250ms ease-in-out;
+
+							span {
+								display: inline-block;
+								position: relative;
+								color: $cTxtBlack;
+								font-size: 16px;
+								font-family: $font3;
+								font-weight: 500;
+								line-height: 1;
+								transition: all 250ms ease-in-out;
+
+								&::before {
+									content: '';
+									position: absolute;
+									bottom: -10px;
+									left: 0;
+									width: 0;
+									height: 3px;
+									background: $cTxtBlack;
+									visibility: hidden;
+									transition: all 250ms ease-in-out;
+								}
+							}
+
+							img {
+								transform: rotate(-90deg);
+								width: 0;
+								transition: all 250ms ease-in-out;
+							}
+						}
 					}
-
-					// > * {
-					// 	position: relative;
-					// 	z-index: 1;
-					// }
 				}
 				&.lvl-3 {
+					position: absolute;
+					left: calc(150px + 15px + 60px);
+					top: 0;
+					right: 0;
+					bottom: 0;
+					transition: all 250ms ease-in-out;
+
+					opacity: 0;
+					visibility: hidden;
+
+					display: flex;
+					flex-direction: row;
+					flex-wrap: wrap;
+					column-gap: 60px;
+
+					> li {
+						> a {
+							text-decoration: none;
+
+							span {
+								color: $cTxtBlack;
+								font-size: 16px;
+								font-family: $font3;
+								font-weight: 700;
+								line-height: 1;
+							}
+						}
+					}
+				}
+
+				&.lvl-4 {
+					margin-top: 20px;
+					> li {
+						&:not(:last-child) {
+							margin-bottom: 20px;
+						}
+						> a {
+							text-decoration: none;
+							span {
+								color: $cTxtBlack;
+								font-size: 20px;
+								font-family: $font3;
+								font-weight: 300;
+								line-height: 1;
+							}
+						}
+					}
 				}
 			}
 		}