Each web-page menu style is RWD and also Mobile Friendly, once finished :-)
I would be grateful for your comments regarding usability, colours, recommendations and/or improvements/
a) Hamburger uses a modified Pure.css style sheet and only appears on narrow screens.
b) Vertical Button Menu created with a little help from @PaulOB
c) Horizontal Button Menu slightly modified Vertical button style
I’m afraid it’s not keyboard friendly (like nearly all dropdowns) and would need a little js to aid keyboard users. It’s the same for nearly all css dropdowns and unless they have a js helper keyboard users cannot activate the hidden menu.
You could rewrite the menu to use the ‘checkbox hack’ to make the menu appear but the problem is that checkboxes don’t get actioned on enter but on pressing the spacebar so you would have to tell keyboard users to use the spacebar to select the menu when it is focussed.
I’d vote for hamburger just because the other two rely on hover behavior, and I hate hover flyouts.
Sometimes I’m reading the page and not paying attention to where my mouse is, and suddenly the content I’m reading is covered by some flyout because my mouse wandered into the wrong part of town. Hovering is too passive and shouldn’t be considered a user action to open anything.
Sometimes I see a link and I click it, and it’s only in the brief moment while the page is unloading that I see the hover flyout with more sub-menus. Seems better if clicking would open the sub-menu instead of going somewhere, and hovering would play no part.
But I think the hamburger is also better because you use the screen space when it’s available. No need to hide the menu when you have so much room to show it.