Hot Relief-Menu Overlap Problem

I have a Main menu is the position-1 and a user menu (which is for logged in users only, but I set it to public for the purposes of this post) at position-0

The problem is is that the drop down menus from the main menu cause problems, where they overlap the user menu the user menu shows through and you can't properly use the drop down from the main menu.

Anyone know how to fix this? I would like the drop down from the main menu to cover the user menu.

rhythmdanceschool.com/upgrade25/

I see only some top menu?

Sorry, missed changing one registered to public, it should be viewable now.

Add to template_css.css on the bottom:

.topmenu UL#nav{
z-index: 100000000!important;
}

How do I go about editted a css document? Can I simply open it as a .txt file or is there something else that I need to do. I used css years ago, but haven't had much exposure to it in a while.

Edit to add:
I tried opening the file in notepad and adding that to the very end of the code. But the problem has not been fixed.

Edit to add:
Tried opening it in the editor my host provides (stormweb) and adding that code but it still does not fix the overlap

Did you refresh page, also you can edit template_css.css from joomla, instead styles tab in template manager go to template tab