fix default UI for dropdown and mega menu (Shopify#2644)

* added vertical padding and made l2 bold to mega menu

* added vertical padding to drop down

* fixed default UI for dropdown and mega menu

* added hover effect to all l2 links and fixed overlapping or mega menu

* adding padding to l3 links and fixed hover effect for dropdown

* reverted the mega menu back to the current setting

* changed horizontal grid gap on mega menu and vertical paddings on dropdown menu

* made vertical grid gap at 1.8 rem to match the 3 rem vertical paddings on mega-menu container

* removed the unnecessary lines of code

* removed the text-thickness that was making l2/l3 links a different size from l1 links

* added a hover effect over active link

* removed uneccessary link size and white space

assets/base.css

@@ -2736,13 +2736,13 @@ details[open] > .header__menu-item .icon-caret {
 }
 
 .header__submenu.list-menu {
-  padding: 2.4rem 0;
+  padding: 1rem 0;
 }
 
 .header__submenu .header__submenu {
   background-color: rgba(var(--color-foreground), 0.03);
-  padding: 0.5rem 0;
-  margin: 0.5rem 0;
+  padding: 1rem 0;
+  margin: 1rem 0;
 }
 
 .header__submenu .header__menu-item:after {
@@ -2751,11 +2751,11 @@ details[open] > .header__menu-item .icon-caret {
 
 .header__submenu .header__menu-item {
   justify-content: space-between;
-  padding: 0.8rem 2.4rem;
+  padding: 0.8rem 2rem;
 }
 
-.header__submenu .header__submenu .header__menu-item {
-  padding-left: 3.4rem;
+.header__submenu .header__menu-item:hover {
+  text-decoration-line: underline;
 }
 
 .header__menu-item .icon-caret {

assets/component-mega-menu.css

@@ -9,8 +9,8 @@
   border-right: 0;
   left: 0;
   overflow-y: auto;
-  padding-bottom: 2.4rem;
-  padding-top: 2.4rem;
+  padding-bottom: 3rem;
+  padding-top: 3rem;
   position: absolute;
   right: 0;
   top: 100%;
@@ -36,15 +36,14 @@
 
 .mega-menu__list {
   display: grid;
-  gap: 2.4rem 4rem;
+  gap: 1.8rem 4rem;
   grid-template-columns: repeat(6, minmax(0, 1fr));
   list-style: none;
 }
 
 .mega-menu__link {
   color: rgba(var(--color-foreground), 0.75);
   display: block;
-  font-size: 1.3rem;
   line-height: calc(1 + 0.3 / var(--font-body-scale));
   padding-bottom: 0.6rem;
   padding-top: 0.6rem;
@@ -54,11 +53,7 @@
 }
 
 .mega-menu__link--level-2 {
-  font-size: 1.4rem;
-}
-
-.mega-menu__link--level-2:not(:only-child) {
-  margin-bottom: 0.8rem;
+  font-weight: bold;
 }
 
 .header--top-center .mega-menu__list {