I still have not come up with a proper solution to this, but have improved it slightly. Hiding the drop-downs with an off-set left:-999em instead of display:none, as per this, which claims to be Accessible, makes them “visible” to screen readers at least, which is better.
But what about seeing users who use tab navigation? They won’t see the drop-down links which have focus.
On the other hand, I have been thinking about giving the site a full code/style overhaul, but it seems a daunting task. I was experimenting with some “concept” menus systems. I have a dummy example page with a new menu. It appears fully tab navigable while being in vision and is fully responsive down to a silly small size without any media queries. My only concern with it is weather some touch-screen users may find the icons a bit cryptic since they don’t see the labels on hover. But then it’s no big deal just to tap and see. This is probably not the design I will use in terms of styling, it’s more about the functioning of it. Any comments? This is the dummy page.