Before I explain my problem I just want to confirm I still get this issue after I disable all plugins and disable all theme/skin modifications.
When the mobile menu displays (below 770px) the categories do not display correctly and render as if they have no children and do not dropdown when clicked but still have arrows as you can see below....
After inspecting the code can see that the incorrect classes are being applied to these parent categories as you can see in the screenshot below.
When I compare my nav code to demo sites such as Madison Island I can see some odd differences...
I can't seem to find where or why 'level-top' class is being applied or what significance it has anywhere. Another thing I noticed is the '< a>' tag only contains the class 'level-top' whereas the classes should be 'level0 has-children' which if I apply these the menu renders correctly (Even though clicking them still doesn't drop them down).
My topmenu/renderer.phtml file is not modified and I cannot see anything wrong with it.