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>&#9654;</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.