Dropdown menu on Hamburger

Hello guys,

We're trying to keep a new site clean by not having a full menu, so we're only using the hamburger icon as per your one-pager site (http://themes.semicolonweb.com/html/canvas/one-page/op-personal.html) for all views (desktop and mobile), but my client requested:

1. To have a drop-down menu appear when you click on the hamburger icon instead of the menu overlay.

Note, these links would navigate through a multi-page website and not a one-pager.
Here's an example of what we've done so far: https://www.aftershock.co.za/approvals/macgroup/

So, what we're trying to achieve is like the attached screenshot where a drop-down menu appears that floats to the right.
Is this possible at all? Please advise.
Thank you. :)
Ros

Thank you Team SemiColonWeb! Very happy with the drop-down hamburger menu, but there are some issues with this...
Please could you look at the attached screenshot.

1. On mobile view, there's now an extra hamburger which needs to be clicked to expand the menu. I can remove this and get the menu to work correctly in mobile view by deleting the first ul and li and of course, the closing ul and li. But if I do this, then the menu reverts to a full menu on desktop view.

2. Also on the screenshot, in the second / correct mobile view layout for the menu, I really love the menu style here. How can I retain this font style / layout?

3. Lastly, on desktop view, when I view the drop-down menu, I can't see the submenu arrows. It comes up when you scroll down on the page, but not when on the landing banner. Any ideas why this is happening?

Here's the link again for your ref: www.aftershock.co.za/approvals/macgroup/

Thank you for your assistance. Much appreciated.
Ros