I have a request from a customer to handle their drop down menu system. I have the menus working as drop downs but they requested that the drop downs happen not on a hover, but must be "clicked" to display them, even all the crazy sub menus.

Furthermore, they want the menus to stay open (pinned) in their revealed state even if the top level nav item is closed. I know it's strange behaviour but it's what they want. It should be noted that only one top nab menu item should be open at any time.
They are employing an iframe to display the hrefs so we don't need cookies to save the state of the menus at this time but it would be nice for the future ;)
I'm not a javascript person, this was cobbled together from code I gathered but I'm at a loss. I did manage to change a bit of JS at one time to handle opening the menus via a click but once the mouse moved out of the ULs it would disappear. 

I've posted my code so far here: <http://jsfiddle.net/9dJ9T/8/>

Can anyone get the menus to only display when clicked and stay opened and "pinned" until they are all subsequently "unpinned"? Ideally I think jquery .toggle method would be better but this menu system has so many UL and LIs in it I can't imagine creating functions of each and every one!! Is there a way such a function could be abstracted to simplify the code and not end up with a huge list of functions? I'm eager to learn from the JS masters!!