How to add a submenu to my dropdown in svelte

I’m working on a svelte project where I have a top bar with a few menus. When I hover over the menus a dropdown will appear below with some menu items. Some menu items have subitems that I want to appear to the side when the menu item is clicked. I can’t figure out how to make the subitems appear.

Here is my code so far:

App.svelte

<script lang="ts">
  import TopBar from './lib/TopBar.svelte'
</script>

<main>
  <TopBar/>
</main>

TopBar.svelte

<script>
    let menuItems = [
        {
            text: "item 1",
            subMenus: []
        },
        {
            text: "item 2",
            subMenus: [
                {
                    text: "sub item 1"
                },
                {
                    text: "sub item 2"
                }
            ]
        },

    ]

    let menus  = [
        {
            text: 'Menu 1',
            menuItems: menuItems
        },
        {
            text: 'Menu 2',
            menuItems: menuItems
        }
    ]
</script>

<div id='topbar'>
    {#each menus as menu}
        <!-- svelte-ignore a11y-no-static-element-interactions -->
        <!-- svelte-ignore a11y-mouse-events-have-key-events -->
        <!-- svelte-ignore a11y-click-events-have-key-events -->
        <div class="topbar-menu">
            <p class="menu-text">{menu.text}</p>
            <div class="dropdown-content rounded-b-lg">
                {#each menu.menuItems as menuItem}
                    <button class="menu-item">
                        <p class="menu-item-text">{menuItem.text}</p>
                        {#if menuItem.subMenus.length > 0}
                            <p>▶</p>
                        {/if}
                    </button>
                {/each}
            </div>
        </div>
    {/each}
</div>

<style>
    #topbar {
        position: absolute;
        top: 0;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .menu-text{
        padding: 0 1rem;
    }

    .topbar-menu:hover{
        background-color: #818181;
    }

    .dropdown-content {
        /*height: 0;*/
        display: flex;
        flex-direction: column;
        position: absolute;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
        background-color: #f9f9f9;
        color: #3a3a3a;
        border: solid 1px #e5e7eb;
        /*transition: height 100ms linear;*/

        clip-path: inset(0% 0% 100% 0%);
        position: absolute;

        transition-property: clip-path;
        transition-duration: 300ms;
        transition-timing-function: ease
    }

    .topbar-menu:hover > .dropdown-content,
    .dropdown-content:hover {
        clip-path: inset(0% 0% 0% 0%);
    }

    .menu-item {
        display: flex;
        background-color: #f9f9f9;
        color: #3a3a3a;
        border: none;
    }

    .menu-item-text{
        margin-right: 1rem
    }
</style>

Anything I have tried just had the submenu confined to the dropdown menu and I can’t get it to appear outside the dropdown.

You need to sign in to view this answers