OK, after telling you your method is not a good idea, then I should probably try to give you a solution ;)

What we need is some way of hiding the menu via JS. The problem is that your script will only run ONLOAD which is too late (the unstyled menu will already be displayed). There are 2 ways to take care of this:

1. You could insert an inline script (inside the body, just before the menu) which does something like:
document.getElementById("menu").style.display = "none";
then when onload is triggered
document.getElementById("menu").style.display = "block";

2. If you want to keep scripts in the HEAD only to avoid changing all your pages html, then you can only access 1 element (the HTML tag). So I would add a class to it some way:
document.documentElement.className = "JSenabled"
or something like this (not sure if this works????)
document.getElementsByTagName("html")[0].className = "JSenabled"

Then add this to your css:
html.JSenabled #menu { display: none }

You would try to do this as SOON AS POSSIBLE on the page so while the page and scripts are loading the menu gets hidden.

Then onload you would remove the classname from the HTML element:
document.documentElement.className = ""
and the menu would show up :)

I would go with method 2.