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:

Answer 1

#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!

Answer 2

The above solution was close, but did not work for me. It required the slight modification below in order to fix the problem being described. When I create a new ASP.NET web forms application project using Visual Studio 2010, the CSS that is generated for the menu by default makes use of ".menu" (CSS classes) to apply style rather than "#menu" (an element with ID of "menu").

#menu - does not work

.menu - does work

So, in other words, put this into your CSS file near the bottom:

.menu ul li ul
{
    display: none;
}

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

Answer 3

I tried the ideas above (with variations) and some fixed the odd rendering (the flicker as it were) but they all caused regressions (example submenus that would render too far away and fly away when you move to them).

Inspired by an idea on another thread, I tried something different: hide the menu initially and unhide it once the page has loaded.

Step by step: I have an invisible class invButton I already had and use for hiding buttons, etc.

<style type="text/css">
.invButton {
    height: 0;
    width: 0;
    visibility: hidden;
    display: none;
    border-style: none;
    border-width: 0;
}
</style>

Next I set the CssClass of the offensive flickering menu to CssClass="invButton", so it starts invisible.

<asp:Menu runat="server" ID="Menu1" ... CssClass="invButton" ... RenderingMode="List" />

Finally, once the page hits '$(document).ready' I remove the class.

<script type="text/javascript">
$(document).ready(function () {
  $('#ctl00_Menu1').removeClass('invButton');
});
</script>

Voila, menu renders nicely in correct format and no weird flickering at load up.

Answer 4

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)

Answer 5

Same issue was with me too. But solved by removing jquery calls. :) or you can download and keep the .js script file inside the script folder instead of referencing it from online.

Answer 6

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.