feat: update jump menu to use flat structure for border styling

Author: sgroi-l

src/scss/components/jump-menu/_jump-menu.scss

@@ -96,20 +96,15 @@
     }
   }
 
-  &__subitems {
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
-    margin-inline-start: 0.1rem;
-  }
-
   &__subitem {
     line-height: 1;
     padding: 0.4em;
+    padding-inline-start: 1rem;
+    margin-left: 0.25rem;
     transition: all 0.2s ease-in-out;
 
     &:hover {
-      background-color: $color-green-20;
+      background-color: $color-green-10;
     }
   }
 

src/scss/components/jump-menu/jump-menu.stories.ts

@@ -94,20 +94,18 @@ export const WithSubMenus: Story = {
         ${items.map((item) => {
           if (item.children) {
             return html`<li class="iati-jump-menu__item">
-              <a href=${item.link || "#"} class="iati-jump-menu__link"
-                >${item.text}</a
-              >
-              <ul class="iati-jump-menu__subitems">
-                ${item.children.map(
-                  (child) =>
-                    html`<li class="iati-jump-menu__subitem">
-                      <a href=${child.link} class="iati-jump-menu__sublink"
-                        >${child.text}</a
-                      >
-                    </li>`,
-                )}
-              </ul>
-            </li>`;
+                <a href=${item.link || "#"} class="iati-jump-menu__link"
+                  >${item.text}</a
+                >
+              </li>
+              ${item.children.map(
+                (child: any) =>
+                  html`<li class="iati-jump-menu__subitem">
+                    <a href=${child.link} class="iati-jump-menu__sublink"
+                      >${child.text}</a
+                    >
+                  </li>`,
+              )}`;
           } else {
             return html`<li class="iati-jump-menu__item">
               <a href=${item.link} class="iati-jump-menu__link">${item.text}</a>