Alignment of submenu points in horizontal menu

[abc]

Hey there, I have a question regarding the menu alignment. I'd like to have the submenu horizontally centered on the page, not centered under its menu point.

Here https://zurichdanceensemble.ch/ueber-uns/
I solved it with a translate
.sub-menu {
position: absolute;
left: 50%;
transform: translateX(-4.6%);
}

It's not convenient when adding a submenu to another secondary menu point, because the translate doesn't center it anymore, obviously. What is a better solution to this?

Second thing I didn't manage is to have a fixed distance between primary, secondary and submenus. I might drawing a blank here :)

Thanks so much in advance!

[arminunruh]

Hey, when writing your own custom CSS, you need to take a look at your inspector to see if this CSS is applied correctly.

Here you can see some parts of your CSS are strikethrough. That means they don't get applied. This means you either need to make your CSS selector more specific because there is some CSS applied with a more specific selector that overrides yours.

Or more simply you just use important.

So your CSS should be.

.sub-menu {
    position: fixed !important;
    left: 50%!important;
    transform: translateX(-50%)!important;
}

[arminunruh]

The reason why your submenu wasn't centered on your website is: position absolute elements are positioned relative to their position relative parent.

In my CSS above, I chose position fixed. position fixed elements are relative to the document itself.

You can read more about position's different values and how they work here:
https://developer.mozilla.org/en-US/docs/Web/CSS/position

And your other concern was you wanted the menus to have the same space between them?

The submenu seems to have a bit of a bigger gap right? Maybe you can just play around with your CSS a little bit and for example add a negative top value to the submenu CSS to make this gap smaller.