Problem with hidden div

Pretty much this is a standard css drop-down menu, except that it's vertical, and it drops down vertically as well (only the last link).

When you hover over "portfolio" the child menu is supposed to drop, and it does. However, if you hover over the area where the menu will drop, even if it hasn't dropped yet, you will achieve the same effect as when you hover over "portfolio". How do I prevent this?

html: elixanstudios.8tar.com/index.html
css: elixanstudios.8tar.com/css/default.css

Thanks in advance!

Well I've found the answer anyway, if it ever helps anyone.
I was using visibility: hidden for the ul ul and then visibility: visible in the ul li:hover ul. However to get rid of the above mentioned effect you also have to put display: hidden in ul ul and display: block in ul li:hover ul.