以下の CSS を追加すればできると思います。
■孫メニューを右に開く CSS の例
⇒ https://lightning.uonuma-js.com/menu-open-right/
@media (min-width: 992px) {
.gMenu>li:hover>.sub-menu {
overflow: visible;
}
.vk-menu-acc ul.sub-menu ul.acc-child-open,
.vk-menu-acc ul.sub-menu ul.acc-child-close {
position: absolute;
left: 100%;
top: 0px;
width: 240px;
background-color: #191919;
}
}
■孫メニューを2列で表示する CSS の例
⇒ https://lightning.uonuma-js.com/menu-2-columns/
@media (min-width: 992px) {
.gMenu>li:hover>.sub-menu {
overflow: visible;
}
.vk-menu-acc ul.sub-menu ul.acc-child-open,
.vk-menu-acc ul.sub-menu ul.acc-child-close {
position: absolute;
left: -50%;
width: 480px;
}
.vk-menu-acc ul.sub-menu ul.acc-child-open li,
.vk-menu-acc ul.sub-menu ul.acc-child-close li {
width: 240px;
float: left;
background-color: #333333;
}
.vk-menu-acc ul.sub-menu ul.acc-child-open li a,
.vk-menu-acc ul.sub-menu ul.acc-child-close li a {
border-right: 1px solid rgba(255,255,255,.15);
}
}
メニュー項目の数が多い場合は、以下のブロックのどれかを使って固定ページを作った方が見やすくなるかもしれません。
・子ページリスト
・選択投稿リスト
・カード