ヘッダーナビのレイアウト

こんにちは、ふたたびよろしくお願いします。

Lightning無償版で、WordpressとLightningは最新版です。

ヘッダーナビのレイアウトを変更しています。

１．アイテムが多い場合２段にする
２．メニューアイテムの輪郭を丸くする
３．モバイルの横幅であってもタイトルの下の行として
　　同様に表示する（PCでは、タイトルの横）

大体できてきました。
問題点がいくつかあります。

A)タブレットなどの横幅サイズにすると、メニュー項目のさらにサブメニューが隠れる。
　（一番右の新規事業のところ、赤色の領域です）
　この場合であっても、画面が横いっぱいPCサイズの場合や、PCサイズの画面スクロールしたときの
　メニューでは問題ありません。

B)メニュー項目に、さらにサブメニューがある場合、文字が左よせになってしまう。
　この場合であっても、画面が横いっぱいPCサイズの場合や、PCサイズの画面スクロールしたときの
　メニューでは問題ありません。

C)サブメニュー項目について、マージン領域を透明色にしたい。
　CSSの指定する場所がわかりませんでした。

丸投げで申し訳ありませんが、なにとぞお力添えください。
よろしくお願いします。

カスタムCSSに以下を書き込むと、新規サーバーでもおなじ動作になります。

/* ヘッダーナビをモバイルであってもコンテンツ幅いっぱいに広げる */
.global-nav {
display: block;
width: 100%;
overflow: visible;
}

.global-nav-list {
font-size: 0;

width: 100%;
height: 100%;
flex-wrap: wrap;

display: flex;
justify-content: center;
align-items: center;

margin: 10px;
padding: 10px;
flex-direction: row;

column-gap: 10px;
row-gap: 10px;
border: solid 10px lihgtblue;
}

.global-nav li {
color: white;

border-radius: 50% 20% / 10% 40%;
/*outline: 2px solid white; */
background-color: yellow;

font-size: 14px; /* 空白を消すために０にしたサイズを今度はセットする */

flex-grow: 1; /* 要素が足りない行の幅を広げる */
flex-basis: 1;
min-width: 150px; /* 最小幅（空間) */
}

.global-nav-list ul {
background-color: black;
}

.global-nav-list ul li {
border-radius: 50% 20% / 10% 40%;
background-color: red;
font-size: 14px; /* 空白を消すために０にしたサイズを今度はセットする */
}

.global-nav-list .sub-menu {
z-index: 100;
overflow: visible !important;
max-height: 200px;
}

ヘルプの必要なページ: [リンクを見るにはログイン]