This config is based on the demo from mywordpressdesign.com. Converted into a Wayfinder config file. Please visit the authors site for additional information.
Upload the contents of the zip file above to the Wayfinder configs directory "assets/snippets/wayfinder/configs/". That's it, now all you need to do is add &config=`diggmenu` to your Wayfinder call. The call that is generating the menu above is:
[[Wayfinder? &config=`diggmenu` &startId=`2`]]
Operation: It took me a while to understand this but the top level menu item is not active if there are sub pages available. So this menu will not work if you need access to the top level paents of the sub pages. If there are no sub pags the top level links as normal. To illustrate this I left Page 4 with no sub pages. This behavior is needed to activate the sub menu with a click. The only way to change this would be to activate the menu on hoover rather than on click.
jQuery: jQuery is packaged with the config so if you are using it already yo will want to edit the diggmenu.config.php file. Also I edit the menu.js file to run jQuery in noConflict() mode so it should play nice with QuickEdit and AjaxSearch.
CSS: The included css file is the same one provided by the original author and includes the surrounding page style. For the menu you only need the styles that are labled /* Menu */ and /* Sub Menu */ the rest can/should be removed to accommodate your own page (I opted to leave it as the original author distributed it). I did modify the code in menu.js and the diggmenu.css files to accommodate the native Wayfinder styles (basically replaced .selected with .active). I also tweaked it so that the active menu does not loose it's active status when a second menu is activated.