How to get rid of ugly asp:Menu flickering?

user_270591 0
Viewed 21221

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.

aspmenu-control asp.net-4.0 menu asp.net
12 Answers
#menu ul li ul 
{ 
    display: none; 
} 

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

This worked for me also. I was not having an issue until I placed a reCaptcha on the form. My menu was being produced within a Master Page also. Thank you very much!

user_12764110
Related