Menu expanding during page load

Question

I have created a mega menu in our application. During the page load, this menu expands all items and then collapses (to required design) after page-load. This expanding is taking place for fraction of seconds and looks wierd to client. I believe that it is a browser issue. What should be done to solve this?

Note: I am using CSS to design the menu and applied this CSS in my aspx page in .net application

Answer 1

In Style Sheet, add

display:none

to your root of menu. here I assume it to be unordered list

This is how, your style will be

<ul id="menu" style="display:none">...</ul>

Add Javascript code in your page.

If you are using JQuery. Try this,

jQuery(document).ready(function(){

jQuery('ul#menu').css('display','block');

});

If it does not work, please provide more information in your question.

Answer 2

Initially set the menu visibility:hidden and only after page load set it to visibility:visible