Critique: Scrollable flyout nav menu

I'm working on a new nav menu for my company's web app. I took loose inspiration from Google's material design tabs where, upon page overflow, arrows appear and the tab section is horizontally scrollable:

After coming up with this solution, I had to make a decision about how to handle submenu content. While I do believe that not having submenus would be the best solution, that's not on the table at the moment. So, I'm left with either traditional dropdown menus (that would have to be worked out with JavaScript due to overflow: hidden issues pertaining to how I built the tab area), or the idea that I came up with:

Here's a Codepen to play with.

I'm calling it a flyout menu, though the term does exist to describe patterns that are similar but different.

Technically, it's a simpler solution. And because tab overflow is handled, it's not going to break the layout by working the way it does. However, because it is relatively novel (correct me if I'm wrong; I can't recall using a menu designed like this before), I'm concerned that it will be confusing to less technical users.

I'm asking for a critique of my flyout menu from a design perspective (as opposed to a technical one; there are some Codepen quirks and some beta quirks as welll). Is it relatively intuitive to use? When clicked, does the design provide enough feedback for a user to notice that the flyout happened? Does it mess with the convention that 'submenus are vertical lists' too much?

Any critiquing is much appreciated.