and when you click on a main navigation link (ie home, services) IF the main navigation has a sub navigation, it will pop up on the bottom (where personal training group training workout consultation online consultation are located now).
You can do it without JS. Just consider it as two menus. If the upper level menu doesn't have sub nav items there is just the blank gray bar. If it does then selecting an upper level displays the sub in the gray bar.
This particular menu is done with pure css using a primary style for the top links and a secondary style for the subs, each link that is clicked is given the style 'active' which shows its particular sub menus if any.
Basically to make it work with css you need a html page for each link so therefore the home link page 'home.html' would have the home link class as 'active' and would have its sub-menus in the code, all other links on that page would not have that class and would not have any sub-menus on that page. Services would have the same 'services.html' but it would be services link that would be active and have the subs and not home...?
I hope that this is making sense...
BTW it could also be achieved with js, this would also be able to take advantage of the onmouseover attribute and change the links and subs onmouseover rather then requiring the click.