How to make a dropdown show even with clip-path and box-shadow

Question

I'm trying to make a dropdown on hover that hangs from a bar over the top. Underneath the bar, there is a box-shadow that I clipped with a clip-path. However, when I hover and open the dropdown, it is also clipped which is behavior I don't want.

div#topbar {
                background-color: var(--tlv-el-color);
                width: calc(100% - 85px);
                height: 6vh;
                position: relative;
                top: 0px;
                left: 85px;
                text-align: right;
                z-index: 10;
                border-bottom: black 1px;
                box-shadow: 0px 0px 20px rgba(0,0,0,0.40);
                clip-path: inset(0px, 0px, -3px, 0px);
            }
#dropdown {
        display: none;
        z-index: 100;
        position: absolute;
        width: 20%;
        background-color: var(--spec-el-color);
        color: var(--text-color);
        height: fit-content;
        top: 100%;
    }

    #dropdown p:hover {
        background-color: var(--tlv-el-color);
    }

    #dropdown p:first-child {
        margin-top: 5%;
        margin-bottom: 0;
        width: 90%;
    }

    #dropdown p:last-child {
        margin-top: 0;
        margin-bottom: 5%;
        width: 90%;
    }

    #dropdown p:not(:first-child):not(:last-child) {
        margin: 0;
        width: 90%;
    }

<div id='topbar'>
<div id='serverheader'>
    <h2>heading</h2>
    <div id='dropdown'>
        <div style='margin:auto;'>
            <p>p1</p>
            <br>
            <p>p2</p>
        </div>
    </div>
</div>

Expected result: dropdown shows fully on hover, box-shadow shows underneath the dropdown

What's actually happening: dropdown gets clipped by clip-path

Things I looked at: How can I add a box-shadow on one side of an element? https://www.w3schools.com/css/css_dropdowns.asp Prevent CSS clip-path from clipping children?