Plotly Dash Boostrap drop down menu is rendered behind the the plotly graph objects. Is there a way to stop this?

I'm making a plotly - dash app that has a navigation side bar to browse through the different app pages (see code below). One of the navigation items contains a dbc.DropDownMenu that hangs over the edge of the navigation side bar into the main content area.

Most of the the time this isn't an issue, except when there are plotly graphs in the main content area. When there are graphs, the drop down menu is rendered below the graphs (see pictures). Is it possible to change the render order always have the drop down shown on top?

# styling the sidebar
SideBar_Style = {
    "position": "fixed",
    "top": 0,
    "left": 0,
    "bottom": 0,
    "width": "18rem",
    "padding": "2rem 1rem",
    "background-color": "#f8f9fa",
}

# padding for the page content
Content_Style = {
    "margin-left": "18rem",
    "margin-right": "2rem",
    "padding": "2rem 1rem",
}


sidebar = html.Div(
[
    html.H2("Navigation", className="display-4"),
    html.Hr(),
    html.P(
        "Select a page", className="lead"
    ),
    dbc.Nav(
        [dbc.NavLink("Home", href="/", active="exact"),
            dbc.NavLink("Timeseries", href="/pages/timeseries",
                        active="exact"),
            dbc.NavItem(
                dbc.Row([
                    dbc.Col(dbc.NavLink("Wind Roses",
                            href="/pages/windrose", active="exact"), width=10),
                    dbc.Col(dbc.DropdownMenu([dbc.DropdownMenuItem("Comparison", href="/pages/windrosecomparison", active="exact"),
                                              dbc.DropdownMenuItem("Item 2")], nav=True), width=2)], className="g-0")

        ),

            dbc.NavLink("Monthly Wind Speeds",
                        href="/pages/monthwindspeeds", active="exact"),
            dbc.NavLink("Recovery", href="/pages/recovery",
                        active="exact"),
            dbc.NavLink("Wind Shear", href="/pages/windshear",
                        active="exact"),
            dbc.NavLink("Diurnal", href="/pages/diurnal", active="exact"),
            dbc.NavLink("Campaign Map",
                        href="/pages/campaignmap", active="exact"),
            dbc.NavLink("TestPage", href="/pages/testpage",
                        active="exact"),
        ],
        vertical=True,
        pills=True,
    ),
],
style=SideBar_Style,
)

content = html.Div(id="page-content", children=[], style=Content_Style)

app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    sidebar,
    content
])

As suggested by Daniel Al Mouiee, changing the Z-Index of the graphs parent container fixed the issue