Display on page ready

First of all sorry for my poor english. Do not hesitate to tell me if the problem I will try to describe is not clear...

I have a menu like this :

<ul class="menu">
  <li>
    <a href="#">Label 1</a>
    <ul class="sub-menu">
      <li>
      <a href="#">Label 1</a>
      </li>
    </ul>
  </li>
</ul>

When I click on the ul.menu li, the child content is displayed with an accordion system. My script is working well.

In the css, .sub-menu is displayed at "block" (in case of javascript is not activated in the browser). In my script.js file, when the doc is ready, i launch a function which manage the menu.In this function, I start by hidding the ul.sub-menu and then come the mechanisms of the menu .

My problem is, when the page is loading, I can firstly see the ul.sub-menu displayed as block, and very quickly, the "script.js" file does its work and hide those elements. Each time the menu is displayed after a loading, it gives to the user an unpleasant effect as it looks like if the menu is flashing (everything opened, and then every sub-menu disappear).

How can I do to fix this issue ? Thanks i开发者_运维问答n advance for your help...

NB - Everything is working regarding the functionalities, it's only a visual matter.

The best thing to do is to start with

ul.sub-menu{
   display:none;
}

in your CSS.

And then to show that once the visitor has activated the link/hover, ec.