本文のバナーにマウスを合わせるとグローバルメニューが開くカスタマイズ

以下のバナーにマウスを合わせると、グローバルメニューのサブメニューが開きます。

[メニュー 1] のバナーにはクラス menu-btn-1 を、[メニュー 2] のバナーにはクラス menu-btn-2 をそれぞれ指定してあります。

グローバルメニューの [メニュー 1] には ID menu-item-110 が、[メニュー 2] には ID menu-item-111 が WordPress により割り当てられています。

JavaScrpit のプログラムと CSS は以下のようになっています。

JavaScrpit のプログラム

$(".menu-btn-1").hover(function(){
  $("li#menu-item-110").addClass("sub-menu-open");
}, function(){
  $("li#menu-item-110").removeClass("sub-menu-open");
});

$(".menu-btn-2").hover(function(){
  $("li#menu-item-111").addClass("sub-menu-open");
}, function(){
  $("li#menu-item-111").removeClass("sub-menu-open");
});

CSS

バナーにマウスを合わせた後、サブメニューの項目をクリックしやすいように、transition の数値を 1.0s に増やしてあります。

.device-pc .gMenu>li.sub-menu-open>ul.sub-menu {
opacity: 1;
max-height: 1000px;
}

.device-pc .gMenu>li.sub-menu-open::after {
opacity: 1;
bottom: 0;
}

.device-pc .gMenu>li.sub-menu-open>ul.sub-menu {
transition: all 1.0s;
}

/* 2023.5.6 その後に追加した CSS によりマウスホバーでメニューが開かなくなったので、スタイル調整 */