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.