These menus work by using javascript to manipulate the CSS Display property using values Block and None.
The Display property can be used in a way that mimics the Visibility property.
Setting Display to none hides the content and the browser redraws the page.
This gives the appearence of an expanding or collapsing a Menu.
Clicking on the Work or Play Menu runs a javascript function showhide() which toggles the sub-menus on and off.
Each sub-menu item is a link, currently going nowhere.
What you Should do
View the source code of this page carefully, particularly the line
document.getElementById(id).style.display == 'none'
This is used to test if a menu is displayed.
If not, it is toggled on. If it is, it is toggled off.
Exercise
1. If you click on both the Work and Play menu options you can see all the sub-options for both. Try it.
This is not what we want.
Clicking on the Work Menu should hide all the Play menu options, if they are visible.
Similiarly, clicking on the Play Menu should hide all the Work menu options, if they are visible.
Study the source code and rewrite it to fix the problem.
2. Add another menu and set of four submenus to those above and make sure Exercise 1 still works.