Place the navigation bar at the top of other elements

Question

I am working on a website and at this problem I got stuck I have created a navigation bar and applied fixed position property in css, but below it, I have created an hover element but this hover display above the navigation bar. Here are some screenshots:)

Here it is not creating any problem(before scrolling down)

after scrolling down it is displaying on the navigation bar

Answer 1

Maybe this works:

nav {
    position: sticky;
    top: 0;
    z-index: 40;
}