Creating a navigation such as this is not all that difficult. With the invention of Flexbox a task such as this one could have given you a few gray hairs it you attempted it in pure CSS. If you are familiar with floats in CSS you would be using a lot of them. Flexbox not only does away with floats but will also keep your media queries at a minimum.
The main question I have is do you have enough content on your site where you will need such an expansive menu system. If so, read on…
This system is structured the same way as any other drop down menu.First, I would use the development tools built into the browsers to find the structure. You can copy and paste the css code into your IDE.
Next, I don’t know how familiar you are with Flexbox, jQuery and CSS transformations but those are basically the tools you are going to need.
Basically, there are two menus nested within the main nav. The main menu floats to the left and the social menu floats to the right. Then the drop down menu is like any other dropdown but it just expands the length of the screen.
In the drop down there are numerous lists displayed inline so they display horizontally.