Mega Menu in Two Rows

[graphicz]

Client has 18 sections and wishes the mega menu to fold and go over two rows. Has anyone achieved this?

Or maybe can you make the 'More' sections a second row?

All suggestions gratefully received.

Thank you...

[graphicz]

OK

Add the folowing styles to the Mega Menu UL

display: flex;
flex-wrap: wrap;

Change the top position of the megamanu drop down div

.megamenu {
top: 70px;
padding: 14px 0 0;
width: 100%;
}

Change the line height of the mega menu a link

.wsdownmenu-list > li > a, .wsdownmenu-list > li a.header-sub-link, .page-list li a {
line-height: 24px;
min-height: 24px;
display: flex;
align-items: center;
}

[graphicz]

However I need the div class megamenu to remain visible for a few more milliseconds so that the mouse cursor can move from the top/second rows to the div's content.
Please can anyone point me in the right direction?

Thank you

[graphicz]

All of the mega menu timings are in 'actinicextras.js', search for: -
* Actinic Mega Menu

Thank you Gary!

[jeffnurse]

Thanks for sharing, that might be useful.