update

src/arquivos/sass/partials/_header.scss

@@ -1,4 +1,5 @@
 .page-header {
+	position: relative;
 	padding: 28px 0;
 	background: $black-500;
 	// O include está puxando a classe mq no SCSS mixin. O lg(max-width: 991px) é um tamanho já armazenado e o max é de max-width.

src/arquivos/sass/partials/_menu.scss

@@ -1,4 +1,6 @@
 .menu {
+	align-self: stretch;
+
 	&__button {
 		padding: 0;
 		border: 0;
@@ -12,14 +14,19 @@
 	}
 
 	.main-menu {
+		height: 100%;
+
 		&__departments {
 			display: flex;
-			align-items: center;
+			margin: 0;
+			height: 100%;
 		}
 
 		&__department {
+			display: flex;
+			align-items: center;
 			margin-right: 40px;
-
+			// O include está puxando a classe mq no SCSS mixin. O lg(min-width: 991px) é um tamanho já armazenado e o min é de min-width.
 			@include mq(lg, min) {
 				&:hover {
 					.main-menu__department-link {
@@ -27,6 +34,12 @@
 						color: $blue-500;
 						text-decoration: underline;
 					}
+
+					.submenu {
+						top: 100%;
+						opacity: 1;
+						pointer-events: all;
+					}
 				}
 			}
 		}
@@ -35,7 +48,7 @@
 			font-size: 12px;
 			line-height: 15px;
 			color: $white-500;
-
+			// O include está puxando a classe mq no SCSS mixin. O lg(min-width: 991px) é um tamanho já armazenado e o min é de min-width.
 			@include mq(lg, min) {
 				// Técnica usada para quando aplicar bold no hover o elemento não mexer toda a tela.
 				&::after {
@@ -50,4 +63,76 @@
 			}
 		}
 	}
+
+	.submenu {
+		position: absolute;
+		// Significa que o submenu vai estar a 100%  mais 32px do topo do header.
+		top: calc(100% + 32px);
+		left: 0;
+		width: 100%;
+		// O map-get é usado para acessar atributos de uma variável. O primeiro valor é o nome da variável(presente em variables) e o segundo o nome do elemento a ser puxado.
+		z-index: map-get($z-index, level-4);
+		padding: 30px 0 43px;
+		background: rgba($white-500, 0.95);
+		box-shadow: 0px 4px 4px rgba($black-500, 0.02);
+		opacity: 0;
+		pointer-events: none;
+		transition: all 0.4s ease-in-out;
+
+		// Usado para fazer as LI preencher todo o submenu assim não fechando quando o mouse estiver sobre ele.
+		&::before {
+			content: '';
+			position: absolute;
+			left: 0;
+			bottom: 100%;
+			width: 100%;
+			height: 28px;
+		}
+
+		&__title {
+			margin: 0;
+			margin: 0 0 8px;
+			font-size: 20px;
+			line-height: 24px;
+		}
+
+		&__categories-wrapper {
+			display: flex;
+			margin-bottom: 8px;
+		}
+
+		&__categories {
+			margin-right: 20px;
+		}
+
+		&__category {
+			padding: 8px 0;
+		}
+
+		&__category-link {
+			line-height: 15px;
+			font-size: 12px;
+			color: $black-500;
+			transition: color 0.2s linear;
+			// O include está puxando a classe mq no SCSS mixin. O lg(min-width: 991px) é um tamanho já armazenado e o min é de min-width.
+			@include mq(lg, min) {
+				&:hover {
+					color: $blue-500;
+				}
+			}
+		}
+
+		&__see-all {
+			display: flex;
+			align-items: center;
+			font-weight: 700;
+			line-height: 15px;
+			font-size: 12px;
+			color: $black-500;
+
+			i {
+				margin-left: 9px;
+			}
+		}
+	}
 }

src/arquivos/sass/utils/_normalize.scss

@@ -23,7 +23,7 @@ html {
    */
 
 body {
-	color: #142032;
+	color: $black-500;
 	margin: 0;
 }
 

src/arquivos/sass/utils/_variaveis.scss

@@ -1,4 +1,4 @@
-// fonts
+// Fonts
 
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
 
@@ -9,15 +9,13 @@ $font-weight-regular: 400;
 $font-weight-heavy: 700;
 $font-height: 1.5;
 
-// colors
+// Colors
 
 $black-500: #000000;
 $white-500: #ffffff;
 $blue-500: #00C8FF;
 $gray-500: #333333;
 
-// universal
-
 // Grid breakpoints
 
 $grid-breakpoints: (
@@ -28,14 +26,12 @@ $grid-breakpoints: (
 	xl: 1200px,
 ) !default;
 
+// Z-index
+
 $z-index: (
-	menu: 15,
+	level-1: 5,
-	popup-add-cart: 10,
+	level-2: 10,
-	dropdown: 10,
+	level-3: 15,
-	flag-prateleira: 5,
+	level-4: 20,
-	comprar-flutuante: 5,
+	level-5: 25,
-	avise-me: 5,
-	scroll-top: 7,
-	header-fixo: 10,
-	popup-user: 15,
 ) !default;

src/controles-customizados/menuPrincipal.html

@@ -2,6 +2,56 @@
 	<ul class="main-menu__departments">
 		<li class="main-menu__department">
 			<a href="#" class="main-menu__department-link" title="LOREM IPSUM">LOREM IPSUM</a>
+
+			<div class="submenu">
+				<div class="container">
+					<h2 class="submenu__title">LOREM IPSUM</h2>
+
+					<div class="submenu__categories-wrapper">
+						<ul class="submenu__categories">
+							<li class="submenu__category">
+								<a href="" class="submenu__category-link">Lorem ipsum</a>
+						</li class="submenu__category">
+
+							<li class="submenu__category">
+								<a href="" class="submenu__category-link">Lorem ipsum</a>
+						</li class="submenu__category">
+
+							<li class="submenu__category">
+								<a href="" class="submenu__category-link">Lorem ipsum</a>
+						 	</li class="submenu__category">
+
+							<li class="submenu__category">
+								<a href="" class="submenu__category-link">Lorem ipsum</a>
+							</li class="submenu__category">
+						</ul>
+
+						<ul class="submenu__categories">
+							<li class="submenu__category">
+								<a href="" class="submenu__category-link">Lorem ipsum</a>
+							</li class="submenu__category">
+
+							<li class="submenu__category">
+								<a href="" class="submenu__category-link">Lorem ipsum</a>
+							</li class="submenu__category">
+
+							<li class="submenu__category">
+								<a href="" class="submenu__category-link">Lorem ipsum</a>
+						</li class="submenu__category">
+
+							<li class="submenu__category">
+								<a href="" class="submenu__category-link">Lorem ipsum</a>
+							</li class="submenu__category">
+						</ul>
+					</div>
+
+					<a href="" class="submenu__see-all">
+						VER TODOS
+						<!--O sprite adiciona um fundo e a segunda classe adiciona a imagem. -->
+						<i class="sprite sprite-menu-arrow-icon"></i>
+					</a>
+				</div>
+			</div>
 		</li>
 
 		<li class="main-menu__department">

src/template-pagina/sub-templates/luizfelipe-header.html

@@ -8,7 +8,7 @@
 				</button>
 
 				<!-- Está chamando o arquivo HTML presente em controles customizados. -->
-				<vtex.cmc:menuPrincipal/>
+				<vtex.cmc:menuPrincipal />
 			</div>
 
 			<a href="/">
@@ -40,7 +40,5 @@
 			<!-- Cria o input de busca VTEX. -->
 			<vtex.cmc:fullTextSearchBox />
 		</div>
-
-
 	</div>
 </header>