How to get rid of ugly asp:Menu flickering?

Question

I'm using the asp:Menu control on an ASP.NET 4.0 Webforms page with table-free rendering mode:

<asp:Menu ID="MenuBase" runat="server" DataSourceID="SiteMapDataSourceMenu"
    Orientation="Horizontal" CssClass="contentmenu" RenderingMode="List" 
    IncludeStyleBlock="false">
</asp:Menu>

The menu has a horizontal main row with 5 or 6 menu items and some of them open vertical popup menus when the user hovers over them.

Often when any postback occurs and the page gets rendered again the menu "flickers" for a moment (say, half a second) which means: All menu items - including the items in the popup menus - are displayed in one or more rows one after each other before they return to the normal intended state.

In this short moment of an "unfolded" display of all menu items the menu looks AS IF Javascript had been disabled in the browser. (It seems that building the popup menus is achieved by using some Javascript in the asp:menu control.)

This behaviour is quite ugly, especially with a big menu (rendering for the short moment over 2 or 3 rows) the whole page content is moved down before it jumps back to normal display.

Do you know any solution for this problem?

Thank you in advance!

(Remark: I should mention that I used the well-known CSS-friendly menu control from CodePlex before I upgraded to ASP.NET 4.0. I supposed that I don't need the CSS-friendly control anymore because the asp:Menu in version 4 offers a built-in List rendering mode now. As far as I remember I didn't have this flickering with the CSS-friendly control and I think this control does not make use of Javascript. Perhaps this was a bad step. I am looking now for a solution without going back to the CSS-friendly menu control, if possible.)

Edit:

This flickering is browser independent, although most noticeable in IE 8 and 7. In IE 7 (or Compatibility mode in IE 8) it's extraordinary ugly since the menu items get displayed in a crazy diagonal pattern even over 5 or 6 rows.

Answer 1

If anyone still needs a solution; the flickering is there because you should set the correct display style in your css for the menu.

Try for example

#menu ul li ul
{
    display: none;
}

and

#menu ul li 
{
    position: relative; 
    float: left;
    list-style: none;
}

The flickering is because the ASP.NET 4 menu uses javascript to set some inline styles.

Answer 2

I also picked up this problem whenever I had a lot going on in the page between the CSS file and the onload event which presumably triggers the javascript to decorate the menu items. Particularly in IE8 this delay for javascript to fix the styling was ugly.

The solutions from peter and Clearcloud8 were almost good for me. I use this:

div.menu > ul > li
{ 
    display: inline-block;
    list-style: none; 
} 

div.menu ul li ul 
{ 
    display: none; 
}

The main difference being that I used "div.menu > ul > li" which targets only the topmost row of items, instead of "div.menu ul li" which afects the sub-menus also - the result being that the submenu items were not the same width, so they dropped down in a jagged list.

(I am using Visual Studio 2010, .Net Framework 4)