CSS to display submenu on top layer globally

Hey! I want to make sure my submenu / dropdown container is always being displayed on top with CSS, as there is currently no way to make this setting globally by changing the settings of the menu in the editor.
Right now it is working like it should on my website but I don’t want to touch/re-arrange the menu every time I set up a new page. I might forget and important information is being covered.

Working in
Wix Studio

Site link

What I’m trying to do
Arrange submenu / dropdown container to front globally with CSS

What I’ve tried so far

.dropdown-container .submenu .wixui-dropdown-container {

position: absolute !important;

z-index: 10000 !important;

}

**I tried it with this code but it didn’t have any effect. What would be the correct CSS code to do it?
**

Do you know when the menu was added to the site? We introduced a new menu component around a year ago, and the only time the dropdown doesn’t seem to show is when the overflow of the header is set to “Hidden” - even when the header is at the back in the arrange order.

Something I have is a “new page checklist”, a series of steps to check when creating a new page, like SEO settings, responsive across breakpoints etc. If you haven’t already, I’d recommend something like this, and adding this check as one of them. It’s great for consistency, and making sure things are accurate.

I created the website in 2024. Overflow of the header is set to “show”.

I have the feeling that the behaviour even changes with existing pages. That the submenu worked fine initially and after time, when I made some changes on the site, it slipped to the back.

I’d rather find a global solution than working with a checklist. This seems like a pretty basic function :slightly_frowning_face:

I checked on a new blank site, but unable to replicate it. However, can see it’s happening in your site. I’ve opened a bug report for it and will loop around when I have more info :slight_smile: